/* KIT v4.1 (4.1.0) · Mesquita Digital · Cursos Técnicos EAD · gerado por montar_kit.py: não editar à mão */
/* fontes locais (Inter e JetBrains Mono, licença OFL): a aula não depende do Google Fonts */
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url(vendor/fonts/inter-latin-400-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url(vendor/fonts/inter-latin-500-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url(vendor/fonts/inter-latin-600-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Inter';font-style:normal;font-weight:700;font-display:swap;src:url(vendor/fonts/inter-latin-700-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Inter';font-style:normal;font-weight:800;font-display:swap;src:url(vendor/fonts/inter-latin-800-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url(vendor/fonts/inter-latin-ext-400-normal.woff2) format('woff2');unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url(vendor/fonts/inter-latin-ext-500-normal.woff2) format('woff2');unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url(vendor/fonts/inter-latin-ext-600-normal.woff2) format('woff2');unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Inter';font-style:normal;font-weight:700;font-display:swap;src:url(vendor/fonts/inter-latin-ext-700-normal.woff2) format('woff2');unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Inter';font-style:normal;font-weight:800;font-display:swap;src:url(vendor/fonts/inter-latin-ext-800-normal.woff2) format('woff2');unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url(vendor/fonts/inter-greek-400-normal.woff2) format('woff2');unicode-range:U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url(vendor/fonts/inter-greek-500-normal.woff2) format('woff2');unicode-range:U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url(vendor/fonts/inter-greek-600-normal.woff2) format('woff2');unicode-range:U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF}
@font-face{font-family:'Inter';font-style:normal;font-weight:700;font-display:swap;src:url(vendor/fonts/inter-greek-700-normal.woff2) format('woff2');unicode-range:U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF}
@font-face{font-family:'Inter';font-style:normal;font-weight:800;font-display:swap;src:url(vendor/fonts/inter-greek-800-normal.woff2) format('woff2');unicode-range:U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:500;font-display:swap;src:url(vendor/fonts/jetbrains-mono-latin-500-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:600;font-display:swap;src:url(vendor/fonts/jetbrains-mono-latin-600-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:700;font-display:swap;src:url(vendor/fonts/jetbrains-mono-latin-700-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:500;font-display:swap;src:url(vendor/fonts/jetbrains-mono-greek-500-normal.woff2) format('woff2');unicode-range:U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:600;font-display:swap;src:url(vendor/fonts/jetbrains-mono-greek-600-normal.woff2) format('woff2');unicode-range:U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:700;font-display:swap;src:url(vendor/fonts/jetbrains-mono-greek-700-normal.woff2) format('woff2');unicode-range:U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF}

/* ===== _v3-base.css ===== */
/* =========================================================
   MESQUITA DIGITAL — Metrologia · Base v3 compartilhada
   Tokens, layout, tipografia, componentes comuns
   ========================================================= */
:root {
  --purple-deep: #2D0A4E; --purple-mid: #4B1B7A; --purple-soft: #7A3FA0;
  --magenta: #BE1E5C; --magenta-soft:#FCE6EF;
  --orange: #F47922; --orange-soft: #FFE9D6;
  --yellow: #FFCB05; --yellow-soft: #FFF6D6;
  --green: #7CC547; --green-soft: #E6F4D7;
  --red: #D64545; --red-soft: #F9DDDD;
  --bg: #FBF8FC; --bg-2: #F4EEFA; --surface: #FFFFFF;
  --text: #1A0830; --text-mute: #5E4880;
  --border: #E5DCEF; --border-strong:#C9B7DE;
  --fs-xs: .75rem; --fs-sm: .875rem; --fs-base: 1rem; --fs-lg: 1.125rem;
  --fs-xl: 1.375rem; --fs-2xl: 1.75rem; --fs-3xl: 2.25rem; --fs-4xl: 3rem; --fs-5xl: 4rem;
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px;
  --s-6: 24px; --s-7: 32px; --s-8: 40px; --s-9: 56px; --s-10: 72px;
  --r-sm: 6px; --r-md: 12px; --r-lg: 20px; --r-xl: 28px;
  --shadow-sm: 0 1px 2px rgba(45,10,78,.06), 0 1px 3px rgba(45,10,78,.04);
  --shadow-md: 0 4px 10px rgba(45,10,78,.08), 0 2px 4px rgba(45,10,78,.06);
  --shadow-lg: 0 12px 28px rgba(45,10,78,.10), 0 4px 10px rgba(45,10,78,.06);
  --shadow-xl: 0 24px 48px rgba(45,10,78,.14), 0 8px 16px rgba(45,10,78,.08);
  --t-fast: 160ms cubic-bezier(.4,0,.2,1);
  --t-spring: 420ms cubic-bezier(.34,1.56,.64,1);
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: 'Inter', system-ui, sans-serif; font-size: var(--fs-base); line-height: 1.6; color: var(--text); background: var(--bg); font-feature-settings: 'cv02','cv03','cv04','cv11'; -webkit-font-smoothing: antialiased; position: relative; overflow-x: hidden; }
body::after { content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 1; opacity: .035; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.95' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>"); }
body::before { content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 0; background: none, none, none; }
::selection { background: var(--magenta); color: #fff; }
:focus-visible { outline: 2px solid var(--magenta); outline-offset: 3px; border-radius: 4px; }
.scroll-progress { position: fixed; top: 0; left: 0; height: 3px; width: 0%; background: var(--magenta); z-index: 100; transition: width .08s linear; box-shadow: 0 0 12px rgba(190,30,92,.4); }
header { position: sticky; top: 0; z-index: 50; background: rgba(251,248,252,.88); backdrop-filter: saturate(180%) blur(12px); -webkit-backdrop-filter: saturate(180%) blur(12px); border-bottom: 1px solid var(--border); }
.header-bar { max-width: 1240px; margin: 0 auto; padding: var(--s-3) var(--s-6); display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); }
.header-brand { display: flex; align-items: center; gap: var(--s-3); }
.header-logo { width: 84px; height: 84px; border-radius: var(--r-md); background: #fff; display: grid; place-items: center; box-shadow: var(--shadow-sm); border: 1px solid var(--border); overflow: hidden; padding: 6px; }
.header-logo img { width: 100%; height: 100%; object-fit: contain; display: block; }
.header-titulo { font-weight: 800; letter-spacing: -.01em; font-size: var(--fs-base); color: var(--text); }
.header-sub { font-size: var(--fs-xs); color: var(--text-mute); margin-top: -2px; }
.header-meta { display: flex; align-items: center; gap: var(--s-3); font-size: var(--fs-xs); color: var(--text-mute); }
.header-pill { background: var(--bg-2); border: 1px solid var(--border); padding: 4px 10px; border-radius: 999px; font-weight: 600; color: var(--purple-deep); }
main { max-width: 1180px; margin: 0 auto; padding: var(--s-8) var(--s-6) var(--s-9); position: relative; z-index: 2; }
.hero { position: relative; padding: var(--s-9) var(--s-7); background: #fff; border: 1px solid var(--border); border-radius: var(--r-xl); box-shadow: var(--shadow-lg); overflow: hidden; margin-bottom: var(--s-8); }
.hero::before { content: ''; position: absolute; right: -60px; bottom: -60px; width: 280px; height: 280px; background: none; border-radius: 50%; pointer-events: none; }
.hero::after { content: ''; position: absolute; right: 30px; top: 30px; width: 56px; height: 56px; background: none; border-radius: 50%; opacity: .12; }
.hero-eyebrow { display: inline-flex; align-items: center; gap: var(--s-2); font-size: var(--fs-xs); font-weight: 600; text-transform: uppercase; letter-spacing: .14em; color: var(--magenta); margin-bottom: var(--s-4); }
.hero-eyebrow::before { content: ''; width: 28px; height: 1.5px; background: var(--magenta); }
.hero h1 { font-size: clamp(2rem, 4.5vw, var(--fs-5xl)); font-weight: 800; line-height: 1.04; letter-spacing: -.04em; margin: 0 0 var(--s-5); color: var(--purple-deep); }
.hero h1 em { font-style: normal; font-weight: 800; background: var(--magenta); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.hero-lead { max-width: 780px; font-size: var(--fs-lg); color: var(--text); margin: 0 0 var(--s-7); }
.hero-lead b { color: var(--purple-deep); font-weight: 700; }
.hero-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-4); }
.hero-stat { background: rgba(255,255,255,.7); border: 1px solid var(--border); padding: var(--s-4) var(--s-5); border-radius: var(--r-md); display: flex; flex-direction: column; transition: transform var(--t-spring), border-color var(--t-fast); }
.hero-stat:hover { transform: translateY(-4px); border-color: var(--border-strong); box-shadow: var(--shadow-sm); }
.hero-stat-icon { width: 36px; height: 36px; background: var(--bg-2); border-radius: var(--r-md); display: grid; place-items: center; margin-bottom: var(--s-3); font-size: 18px; }
.hero-stat .v { font-size: var(--fs-xl); font-weight: 800; letter-spacing: -.03em; font-feature-settings: 'tnum'; font-family: 'JetBrains Mono', monospace; }
.hero-stat .l { font-size: var(--fs-xs); color: var(--text-mute); text-transform: uppercase; letter-spacing: .08em; font-weight: 500; }
.bento { display: grid; grid-template-columns: 1.5fr 1fr; gap: var(--s-5); margin-bottom: var(--s-9); }
.objetivos, .aside-info { padding: var(--s-7); background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); }
.objetivos { background: var(--purple-deep); color: #fff; border: none; box-shadow: var(--shadow-md); }
.objetivos-titulo { font-size: var(--fs-xs); font-weight: 600; text-transform: uppercase; letter-spacing: .14em; color: var(--yellow); margin-bottom: var(--s-3); display: flex; align-items: center; gap: var(--s-2); }
.objetivos-titulo::before { content: '✦'; font-size: 14px; }
.objetivos h3 { font-size: var(--fs-2xl); font-weight: 800; margin: 0 0 var(--s-5); letter-spacing: -.02em; line-height: 1.2; }
.objetivos ul { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--s-3); }
.objetivos li { padding-left: 28px; position: relative; font-size: var(--fs-base); }
.objetivos li::before { content: '→'; position: absolute; left: 0; top: 0; color: var(--orange); font-weight: 700; }
.aside-info { background: var(--yellow-soft); border-color: var(--orange); }
.aside-info-eyebrow { font-size: var(--fs-xs); font-weight: 600; text-transform: uppercase; letter-spacing: .14em; color: var(--orange); margin-bottom: var(--s-3); display: flex; align-items: center; gap: var(--s-2); }
.aside-info-eyebrow::before { content: ''; width: 24px; height: 1px; background: var(--orange); }
.aside-info h4 { font-size: var(--fs-xl); font-weight: 700; margin: 0 0 var(--s-4); line-height: 1.25; letter-spacing: -.01em; }
.aside-info p { margin: 0; font-size: var(--fs-sm); color: var(--text); }
.section { margin: var(--s-10) 0; }
.section-num { display: inline-flex; align-items: center; gap: var(--s-3); font-size: var(--fs-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .14em; color: var(--magenta); margin-bottom: var(--s-4); }
.section-num-circle { width: 32px; height: 32px; background: var(--magenta); color: #fff; border-radius: 50%; display: grid; place-items: center; font-family: 'JetBrains Mono', monospace; font-weight: 800; letter-spacing: 0; }
.section h2 { font-size: clamp(1.6rem, 3.2vw, var(--fs-3xl)); font-weight: 800; margin: 0 0 var(--s-5); letter-spacing: -.03em; line-height: 1.15; color: var(--purple-deep); }
.section-lead { max-width: 780px; font-size: var(--fs-lg); margin: 0 0 var(--s-7); color: var(--text); }
.section-lead b { color: var(--purple-deep); font-weight: 700; }
.instrumentos-acordeao { display: grid; gap: var(--s-4); }
.instrumento { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); overflow: hidden; transition: box-shadow var(--t-fast), border-color var(--t-fast); }
.instrumento:hover { box-shadow: var(--shadow-md); border-color: var(--border-strong); }
.instrumento-header { padding: var(--s-5) var(--s-6); display: grid; grid-template-columns: 80px 1fr auto; gap: var(--s-5); align-items: center; cursor: pointer; background: none; transition: background var(--t-fast); border: none; width: 100%; text-align: left; font-family: inherit; color: inherit; }
.instrumento.open .instrumento-header { background: var(--bg-2); border-bottom: 1px solid var(--border); }
.instrumento-num { width: 64px; height: 64px; background: var(--purple-deep); color: #fff; border-radius: var(--r-md); display: grid; place-items: center; font-family: 'JetBrains Mono', monospace; font-weight: 800; font-size: var(--fs-xl); box-shadow: var(--shadow-sm); }
.instrumento.open .instrumento-num { background: var(--magenta); }
.instrumento-titulo h3 { margin: 0 0 4px; font-size: var(--fs-xl); font-weight: 800; color: var(--purple-deep); letter-spacing: -.02em; }
.instrumento-tags { display: flex; gap: var(--s-2); font-size: var(--fs-xs); color: var(--text-mute); flex-wrap: wrap; }
.instrumento-tag { background: var(--bg-2); border: 1px solid var(--border); padding: 2px 10px; border-radius: 999px; font-weight: 600; color: var(--purple-mid); }
.instrumento-tag.faixa { color: var(--magenta); border-color: var(--magenta-soft); background: var(--magenta-soft); }
.instrumento-tag.res { color: var(--orange); border-color: var(--orange-soft); background: var(--orange-soft); }
.instrumento-chev { font-size: 24px; color: var(--text-mute); transition: transform var(--t-spring); }
.instrumento.open .instrumento-chev { transform: rotate(180deg); color: var(--magenta); }
.instrumento-corpo { display: none; padding: var(--s-7); border-top: 1px solid var(--border); background: var(--bg-2); }
.instrumento.open .instrumento-corpo { display: block; animation: fadeSlide var(--t-spring); }
@keyframes fadeSlide { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } }
.instrumento-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: var(--s-6); }
.instrumento-bloco h4 { font-size: var(--fs-xs); font-weight: 700; margin: 0 0 var(--s-3); color: var(--magenta); text-transform: uppercase; letter-spacing: .08em; }
.instrumento-bloco p { margin: 0 0 var(--s-4); font-size: var(--fs-base); line-height: 1.6; }
.instrumento-bloco ul { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--s-2); }
.instrumento-bloco ul li { padding-left: 24px; position: relative; font-size: var(--fs-sm); }
.instrumento-bloco ul li::before { content: '◆'; color: var(--orange); position: absolute; left: 4px; font-size: 10px; top: 4px; }
.instrumento-callout { margin-top: var(--s-5); padding: var(--s-4) var(--s-5); background: var(--magenta-soft); border-left: 3px solid var(--magenta); border-radius: 0 var(--r-md) var(--r-md) 0; font-size: var(--fs-sm); }
.instrumento-callout b { color: var(--magenta); }
.instrumento-svg { background: var(--bg-2); border: 1px solid var(--border); border-radius: var(--r-md); padding: var(--s-4); display: grid; place-items: center; }
.instrumento-svg svg { width: 100%; height: auto; display: block; }
.tabela-comparativa { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-md); }
.tabela-comparativa table { width: 100%; border-collapse: collapse; }
.tabela-comparativa thead { background: var(--purple-deep); }
.tabela-comparativa thead th { color: #fff; text-align: left; padding: var(--s-4) var(--s-5); font-size: var(--fs-sm); font-weight: 700; }
.tabela-comparativa thead th:first-child { background: var(--purple-deep); }
.tabela-comparativa tbody td, .tabela-comparativa tbody th { padding: var(--s-4) var(--s-5); border-bottom: 1px solid var(--border); font-size: var(--fs-sm); vertical-align: top; }
.tabela-comparativa tbody th { text-align: left; background: var(--bg-2); font-weight: 700; color: var(--purple-deep); white-space: nowrap; }
.tabela-comparativa tbody tr:last-child td, .tabela-comparativa tbody tr:last-child th { border-bottom: none; }
.tabela-comparativa tbody tr:hover { background: var(--magenta-soft); }
.tab-strong { color: var(--magenta); font-weight: 700; }
.tab-mono { font-family: 'JetBrains Mono', monospace; font-size: var(--fs-xs); }
.exercicio { background: var(--purple-deep); color: #fff; border-radius: var(--r-xl); padding: var(--s-8); box-shadow: var(--shadow-xl); overflow: hidden; position: relative; }
.exercicio::before { content: ''; position: absolute; left: -80px; top: -80px; width: 200px; height: 200px; background: none; border-radius: 50%; }
.exercicio::after { content: '✦'; position: absolute; right: 40px; top: 40px; font-size: 80px; color: rgba(255,255,255,.10); }
.exercicio-eyebrow { font-size: var(--fs-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .14em; color: var(--yellow); margin-bottom: var(--s-3); position: relative; z-index: 1; }
.exercicio h3 { font-size: var(--fs-2xl); font-weight: 800; margin: 0 0 var(--s-5); letter-spacing: -.02em; position: relative; z-index: 1; }
.exercicio-pergunta { font-size: var(--fs-lg); margin: 0 0 var(--s-5); position: relative; z-index: 1; color: rgba(255,255,255,.94); }
.exercicio-pergunta b { color: var(--yellow); }
.exercicio-input-row { display: flex; gap: var(--s-3); position: relative; z-index: 1; max-width: 480px; margin-bottom: var(--s-4); flex-wrap: wrap; }
.exercicio-input { flex: 1; min-width: 200px; padding: var(--s-4); border-radius: var(--r-md); border: none; background: rgba(255,255,255,.95); color: var(--purple-deep); font-family: 'JetBrains Mono', monospace; font-size: var(--fs-lg); font-weight: 700; text-align: center; }
.exercicio-btn { padding: var(--s-4) var(--s-6); border-radius: var(--r-md); border: none; background: var(--yellow); color: var(--purple-deep); font-family: inherit; font-weight: 800; font-size: var(--fs-base); cursor: pointer; transition: transform var(--t-spring); }
.exercicio-btn:hover { transform: scale(1.05); }
.exercicio-fb { display: none; margin-top: var(--s-4); padding: var(--s-4) var(--s-5); border-radius: var(--r-md); background: rgba(255,255,255,.10); border-left: 3px solid var(--yellow); position: relative; z-index: 1; font-size: var(--fs-sm); }
.exercicio-fb.show { display: block; animation: fadeSlide var(--t-spring); }
.exercicio-fb.ok { border-left-color: var(--green); background: rgba(124,197,71,.15); }
.exercicio-fb.err { border-left-color: var(--orange); background: rgba(244,121,34,.18); }
.quiz-section .section-header { display: flex; align-items: center; justify-content: space-between; gap: var(--s-6); flex-wrap: wrap; margin-bottom: var(--s-6); }
.quiz-progress { display: flex; gap: var(--s-2); }
.quiz-progress-dot { width: 12px; height: 12px; background: var(--border); border-radius: 50%; transition: background var(--t-fast), box-shadow var(--t-fast); }
.quiz-progress-dot.cert { background: var(--green); box-shadow: 0 0 0 3px var(--green-soft); }
.quiz-progress-dot.err  { background: var(--orange); box-shadow: 0 0 0 3px var(--orange-soft); }
.quiz-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: var(--s-6); margin-bottom: var(--s-5); box-shadow: var(--shadow-sm); transition: box-shadow var(--t-fast), border-color var(--t-fast); }
.quiz-card.done { background: var(--surface); border-color: var(--border-strong); }
.quiz-q { font-size: var(--fs-lg); font-weight: 700; margin: 0 0 var(--s-5); color: var(--purple-deep); }
.quiz-opts { display: grid; gap: var(--s-2); }
.quiz-opt { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-3) var(--s-4); background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); font-family: inherit; font-size: var(--fs-base); color: var(--text); cursor: pointer; transition: all var(--t-fast); text-align: left; }
.quiz-opt-letra { width: 28px; height: 28px; flex: 0 0 28px; background: var(--bg-2); color: var(--purple-deep); border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: var(--fs-sm); border: 1px solid var(--border); transition: all var(--t-fast); }
.quiz-opt:hover:not(:disabled) { border-color: var(--magenta); background: var(--magenta-soft); }
.quiz-opt:hover:not(:disabled) .quiz-opt-letra { background: var(--magenta); color: #fff; }
.quiz-opt.right { background: var(--green-soft); border-color: var(--green); color: var(--green); font-weight: 600; }
.quiz-opt.right .quiz-opt-letra { background: var(--green); color: #fff; border-color: var(--green); }
.quiz-opt.wrong { background: var(--red-soft); border-color: var(--red); color: var(--red); font-weight: 600; }
.quiz-opt.wrong .quiz-opt-letra { background: var(--red); color: #fff; border-color: var(--red); }
.quiz-fb { display: none; margin-top: var(--s-4); padding: var(--s-3) var(--s-4); font-size: var(--fs-sm); border-radius: var(--r-sm); }
.quiz-fb.show { display: block; }
.quiz-fb.ok { background: var(--green-soft); color: var(--green); border-left: 3px solid var(--green); }
.quiz-fb.err { background: var(--red-soft); color: var(--red); border-left: 3px solid var(--red); }
.quiz-resumo { display: none; padding: var(--s-6); background: var(--purple-deep); color: #fff; border-radius: var(--r-lg); text-align: center; margin-top: var(--s-5); }
.quiz-resumo.show { display: block; animation: fadeSlide var(--t-spring); }
.quiz-resumo.warn { background: var(--orange); color: var(--purple-deep); }
.quiz-resumo.err  { background: var(--purple-mid); }
.quiz-resumo.ok   { background: var(--purple-deep); }
.quiz-resumo-icon { font-size: 42px; margin-bottom: var(--s-2); }
.quiz-resumo-titulo { margin: 0 0 var(--s-2); font-size: var(--fs-2xl); font-weight: 800; letter-spacing: -.02em; }
.quiz-resumo-pontos { font-family: 'JetBrains Mono', monospace; font-size: var(--fs-xl); margin-bottom: var(--s-3); }
.quiz-resumo-msg { margin: 0 0 var(--s-5); font-size: var(--fs-sm); opacity: .92; }
.quiz-resumo-btn { padding: var(--s-3) var(--s-6); background: rgba(255,255,255,.18); color: #fff; border: 1px solid rgba(255,255,255,.35); border-radius: var(--r-md); cursor: pointer; font-family: inherit; font-weight: 600; }
.quiz-resumo.warn .quiz-resumo-btn { color: var(--purple-deep); background: rgba(255,255,255,.4); border-color: var(--purple-deep); }
.encerramento { margin-top: var(--s-10); padding: var(--s-8); background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-xl); box-shadow: var(--shadow-md); }
.encerramento-eyebrow { font-size: var(--fs-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .14em; color: var(--magenta); margin-bottom: var(--s-3); }
.encerramento h2 { font-size: var(--fs-2xl); font-weight: 800; margin: 0 0 var(--s-4); color: var(--purple-deep); }
.encerramento p { margin: 0 0 var(--s-6); max-width: 720px; font-size: var(--fs-base); }
.encerramento-next { display: flex; align-items: center; gap: var(--s-4); padding: var(--s-4) var(--s-5); background: var(--purple-deep); color: #fff; border-radius: var(--r-md); font-weight: 600; }
.encerramento-next-label { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .12em; opacity: .82; }
.encerramento-next-titulo { font-weight: 700; }
.encerramento-next-arrow { margin-left: auto; font-size: 22px; }
footer { margin-top: var(--s-10); padding: var(--s-7) var(--s-6); background: var(--purple-deep); color: rgba(255,255,255,.78); text-align: center; font-size: var(--fs-sm); position: relative; z-index: 2; }
footer strong { color: var(--yellow); font-weight: 700; }
.reveal { opacity: 0; transform: translateY(20px); transition: opacity .6s ease, transform .6s cubic-bezier(0.34,1.56,0.64,1); }
.reveal.in { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } .reveal { opacity: 1; transform: none; } }
/* BOTÃO VOLTAR AO TOPO */
.btn-topo { position: fixed; bottom: 24px; right: 24px; width: 48px; height: 48px; background: var(--magenta); color: #fff; border: none; border-radius: 50%; box-shadow: var(--shadow-lg); cursor: pointer; display: grid; place-items: center; font-size: 20px; font-weight: 800; opacity: 0; pointer-events: none; transform: translateY(20px); transition: opacity var(--t-fast), transform var(--t-spring), background var(--t-fast); z-index: 80; }
.btn-topo.show { opacity: 1; pointer-events: auto; transform: translateY(0); }
.btn-topo:hover { background: var(--purple-deep); transform: translateY(-4px) scale(1.05); }
.btn-topo:focus-visible { outline: 3px solid var(--yellow); outline-offset: 3px; }

/* TOC FLUTUANTE LATERAL (desktop) */
.toc-flutuante { position: fixed; right: 24px; top: 50%; transform: translateY(-50%); display: none; flex-direction: column; gap: 8px; z-index: 40; background: rgba(255,255,255,.92); backdrop-filter: blur(8px); border: 1px solid var(--border); border-radius: var(--r-md); padding: 12px 6px; box-shadow: var(--shadow-md); }
.toc-flutuante .toc-item { width: 24px; height: 24px; border-radius: 50%; background: var(--bg-2); color: var(--text-mute); border: none; cursor: pointer; font-family: 'JetBrains Mono', monospace; font-weight: 800; font-size: 10px; display: grid; place-items: center; transition: all var(--t-fast); position: relative; }
.toc-flutuante .toc-item:hover { background: var(--magenta); color: #fff; transform: scale(1.15); }
.toc-flutuante .toc-item.atual { background: var(--magenta); color: #fff; box-shadow: 0 0 0 3px var(--magenta-soft); }
.toc-flutuante .toc-item .toc-label { position: absolute; right: calc(100% + 12px); top: 50%; transform: translateY(-50%); background: var(--purple-deep); color: #fff; padding: 6px 12px; border-radius: var(--r-sm); font-family: 'Inter', sans-serif; font-weight: 600; font-size: 11px; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity var(--t-fast); }
.toc-flutuante .toc-item .toc-label::after { content: ''; position: absolute; left: 100%; top: 50%; transform: translateY(-50%); border: 6px solid transparent; border-left-color: var(--purple-deep); }
.toc-flutuante .toc-item:hover .toc-label { opacity: 1; }
@media (min-width: 1400px) { .toc-flutuante { display: flex; } }

/* CARD CURIOSIDADE HISTÓRICA */
.curiosidade { background: var(--yellow-soft); border: 1px solid var(--yellow); border-left: 5px solid var(--orange); border-radius: var(--r-md); padding: var(--s-5) var(--s-6); margin: var(--s-6) 0; box-shadow: var(--shadow-sm); display: grid; grid-template-columns: auto 1fr; gap: var(--s-5); align-items: start; }
.curiosidade .cur-ico { width: 56px; height: 56px; background: var(--orange); color: #fff; border-radius: var(--r-md); display: grid; place-items: center; font-size: 28px; box-shadow: var(--shadow-sm); }
.curiosidade .cur-eyebrow { font-size: var(--fs-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .12em; color: var(--orange); margin-bottom: 4px; }
.curiosidade h4 { margin: 0 0 var(--s-2); color: var(--purple-deep); font-size: var(--fs-lg); line-height: 1.25; }
.curiosidade p { margin: 0; font-size: var(--fs-sm); color: var(--text); line-height: 1.6; }
.curiosidade p + p { margin-top: var(--s-2); }
.curiosidade .cur-fonte { display: inline-block; margin-top: var(--s-3); font-size: var(--fs-xs); color: var(--text-mute); font-style: italic; }

/* CARD APROFUNDAMENTO ("Para quem quer mais") */
.aprofundamento { background: var(--purple-deep); color: #fff; border-radius: var(--r-lg); padding: var(--s-6) var(--s-7); margin: var(--s-7) 0; box-shadow: var(--shadow-lg); position: relative; overflow: hidden; }
.aprofundamento::before { content: '🎯'; position: absolute; right: 24px; top: 16px; font-size: 64px; opacity: 0.12; }
.aprofundamento .apf-eyebrow { font-size: var(--fs-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .14em; color: var(--yellow); margin-bottom: var(--s-2); display: flex; align-items: center; gap: var(--s-2); }
.aprofundamento h4 { margin: 0 0 var(--s-3); font-size: var(--fs-xl); font-weight: 800; color: #fff; letter-spacing: -.01em; }
.aprofundamento p { margin: 0 0 var(--s-3); color: rgba(255,255,255,.92); font-size: var(--fs-sm); line-height: 1.6; }
.aprofundamento ul { margin: var(--s-3) 0 0; padding-left: 22px; color: rgba(255,255,255,.92); }
.aprofundamento ul li { margin-bottom: var(--s-2); font-size: var(--fs-sm); }
.aprofundamento b, .aprofundamento strong { color: var(--yellow); }

/* CROSS-REFERENCES (links entre aulas) */
.cross-refs { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); padding: var(--s-5); margin: var(--s-6) 0; box-shadow: var(--shadow-sm); }
.cross-refs .xr-eyebrow { font-size: var(--fs-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .12em; color: var(--magenta); margin-bottom: var(--s-3); display: flex; align-items: center; gap: var(--s-2); }
.cross-refs .xr-eyebrow::before { content: '🔗'; }
.cross-refs ul { margin: 0; padding-left: 22px; }
.cross-refs ul li { margin-bottom: var(--s-2); font-size: var(--fs-sm); color: var(--text); }
.cross-refs ul li b { color: var(--purple-deep); }

/* CONFETE QUIZ 100% */
.confete { position: fixed; inset: 0; pointer-events: none; z-index: 200; overflow: hidden; }
.confete .peca { position: absolute; width: 10px; height: 10px; opacity: 0; animation: confeteCai 3s ease-out forwards; }

@keyframes confeteCai {
  0% { transform: translateY(-100vh) rotate(0deg); opacity: 1; }
  100% { transform: translateY(100vh) rotate(720deg); opacity: 0; }
}

/* COUNTER ANIMADO nos hero-stats */
.hero-stat .v { transition: color var(--t-fast); }
.hero-stat[data-counted="1"] .v { animation: counterBounce .4s ease-out; }
@keyframes counterBounce {
  0% { transform: scale(1); }
  50% { transform: scale(1.18); color: var(--magenta); }
  100% { transform: scale(1); }
}

/* MELHORIAS DE HOVER */
.quiz-opt:focus-visible { outline: 3px solid var(--magenta); outline-offset: 2px; }
.ck-opt:focus-visible { outline: 3px solid var(--orange); outline-offset: 2px; }

/* CHECKPOINT INTERMEDIÁRIO — pulso de verificação no meio da aula */
.checkpoint { background: var(--yellow-soft); border-left: 5px solid var(--orange); border-radius: var(--r-md); padding: var(--s-6) var(--s-7); margin: var(--s-8) 0; box-shadow: var(--shadow-md); position: relative; overflow: hidden; }
.checkpoint::before { content: ''; position: absolute; right: -40px; top: -40px; width: 120px; height: 120px; background: rgba(244,121,34,.18); border-radius: 50%; pointer-events: none; }
.checkpoint .ck-eyebrow { font-size: var(--fs-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .14em; color: var(--orange); margin-bottom: var(--s-2); display: flex; align-items: center; gap: var(--s-2); }
.checkpoint .ck-eyebrow::before { content: '⚡'; font-size: 16px; }
.checkpoint h4 { margin: 0 0 var(--s-4); font-size: var(--fs-xl); font-weight: 700; color: var(--purple-deep); letter-spacing: -.01em; }
.checkpoint .ck-pergunta { font-size: var(--fs-base); margin: 0 0 var(--s-5); color: var(--text); }
.checkpoint .ck-pergunta b { color: var(--purple-deep); }
.checkpoint .ck-opcoes { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--s-3); margin-bottom: var(--s-3); }
.checkpoint .ck-opt { padding: var(--s-3) var(--s-4); background: var(--surface); border: 2px solid var(--border-strong); border-radius: var(--r-sm); font-family: inherit; font-weight: 600; color: var(--purple-deep); cursor: pointer; transition: all var(--t-fast); text-align: left; }
.checkpoint .ck-opt:hover:not(:disabled) { border-color: var(--orange); background: var(--orange-soft); }
.checkpoint .ck-opt.right { background: var(--green-soft); border-color: var(--green); color: #4D8226; }
.checkpoint .ck-opt.wrong { background: var(--red-soft); border-color: var(--red); color: var(--red); }
.checkpoint .ck-opt:disabled { cursor: default; }
.checkpoint .ck-fb { display: none; margin-top: var(--s-3); padding: var(--s-3) var(--s-4); border-radius: var(--r-sm); font-size: var(--fs-sm); }
.checkpoint .ck-fb.show { display: block; animation: fadeSlide var(--t-spring); }
.checkpoint .ck-fb.ok { background: var(--green-soft); border-left: 3px solid var(--green); color: #4D8226; }
.checkpoint .ck-fb.err { background: var(--red-soft); border-left: 3px solid var(--red); color: var(--red); }

/* SIMULADOR GENÉRICO */
.sim-block { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-xl); box-shadow: var(--shadow-lg); padding: var(--s-7); display: grid; grid-template-columns: 1.4fr 1fr; gap: var(--s-7); }
.sim-canvas-wrap { background: var(--bg-2); border-radius: var(--r-md); padding: var(--s-5); display: grid; place-items: center; min-height: 360px; }
.sim-block canvas { max-width: 100%; height: auto; display: block; border-radius: var(--r-sm); background: #fff; }
.sim-painel { display: grid; gap: var(--s-5); align-content: start; }
.sim-display { background: var(--purple-deep); color: var(--yellow); border-radius: var(--r-md); padding: var(--s-5); text-align: center; font-family: 'JetBrains Mono', monospace; box-shadow: inset 0 2px 8px rgba(0,0,0,.3); }
.sim-display-label { font-size: var(--fs-xs); color: rgba(255,203,5,.7); text-transform: uppercase; letter-spacing: .14em; margin-bottom: var(--s-2); }
.sim-display-valor { font-size: var(--fs-3xl); font-weight: 700; letter-spacing: -.02em; line-height: 1; }
.sim-display-decomp { font-size: var(--fs-sm); margin-top: var(--s-2); color: rgba(255,255,255,.78); }
.sim-display-dual { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3); }
.sim-display-mini { background: var(--purple-deep); color: #fff; border-radius: var(--r-md); padding: var(--s-4); text-align: center; font-family: 'JetBrains Mono', monospace; }
.sim-display-mini-label { font-size: var(--fs-xs); color: var(--yellow); text-transform: uppercase; letter-spacing: .12em; margin-bottom: var(--s-1); }
.sim-display-mini-valor { font-size: var(--fs-xl); font-weight: 700; letter-spacing: -.02em; }
.sim-controle { display: grid; gap: var(--s-3); }
.sim-controle label { font-size: var(--fs-xs); color: var(--text-mute); text-transform: uppercase; letter-spacing: .08em; font-weight: 600; }
.sim-range { -webkit-appearance: none; width: 100%; height: 8px; border-radius: 4px; background: var(--magenta); outline: none; }
.sim-range::-webkit-slider-thumb { -webkit-appearance: none; width: 24px; height: 24px; background: var(--surface); border: 3px solid var(--magenta); border-radius: 50%; cursor: pointer; box-shadow: var(--shadow-sm); transition: transform var(--t-fast); }
.sim-range::-webkit-slider-thumb:hover { transform: scale(1.15); }
.sim-range::-moz-range-thumb { width: 24px; height: 24px; background: var(--surface); border: 3px solid var(--magenta); border-radius: 50%; cursor: pointer; }
.sim-presets { display: flex; gap: var(--s-2); flex-wrap: wrap; }
.sim-preset { flex: 1; min-width: 70px; padding: var(--s-2) var(--s-3); border-radius: var(--r-sm); border: 1px solid var(--border-strong); background: var(--surface); color: var(--purple-deep); font-family: inherit; font-weight: 600; font-size: var(--fs-xs); cursor: pointer; transition: all var(--t-fast); }
.sim-preset:hover { background: var(--magenta); color: #fff; border-color: var(--magenta); }
.sim-info-box { background: var(--magenta-soft); border-left: 3px solid var(--magenta); border-radius: 0 var(--r-md) var(--r-md) 0; padding: var(--s-3) var(--s-4); font-size: var(--fs-sm); }
.sim-info-box b { color: var(--magenta); }
.sim-veredito { padding: var(--s-4) var(--s-5); border-radius: var(--r-md); font-weight: 700; text-align: center; font-size: var(--fs-base); }
.sim-veredito.ok { background: var(--green-soft); color: #4D8226; border: 2px solid var(--green); }
.sim-veredito.err { background: var(--red-soft); color: var(--red); border: 2px solid var(--red); }
.sim-veredito.warn { background: var(--yellow-soft); color: #B8860B; border: 2px solid var(--yellow); }
.sim-status { padding: var(--s-3) var(--s-4); border-radius: var(--r-md); font-size: var(--fs-sm); font-weight: 600; text-align: center; }
.sim-status.ok { background: var(--green-soft); color: #4D8226; border: 1px solid var(--green); }
.sim-status.warn { background: var(--yellow-soft); color: #B8860B; border: 1px solid var(--yellow); }
.sim-status.err { background: var(--red-soft); color: var(--red); border: 1px solid var(--red); }
/* APLICACOES */
.aplic-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--s-4); }
.aplic-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: var(--s-5); box-shadow: var(--shadow-sm); cursor: pointer; transition: all var(--t-spring); position: relative; overflow: hidden; text-align: left; font-family: inherit; }
.aplic-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--magenta); }
.aplic-card.active { background: var(--purple-deep); color: #fff; border-color: var(--magenta); }
.aplic-card-icon { width: 52px; height: 52px; background: var(--magenta-soft); color: var(--magenta); border-radius: var(--r-md); display: grid; place-items: center; font-size: 26px; margin-bottom: var(--s-3); }
.aplic-card.active .aplic-card-icon { background: rgba(255,255,255,.18); color: var(--yellow); }
.aplic-card h4 { margin: 0 0 var(--s-2); font-size: var(--fs-base); font-weight: 700; letter-spacing: -.01em; }
.aplic-card-resumo { font-size: var(--fs-sm); color: var(--text-mute); margin: 0; }
.aplic-card.active .aplic-card-resumo { color: rgba(255,255,255,.86); }
.aplic-detalhe { margin-top: var(--s-5); padding: var(--s-6); background: var(--bg-2); border: 1px solid var(--border); border-left: 4px solid var(--magenta); border-radius: var(--r-md); display: none; }
.aplic-detalhe.show { display: block; animation: fadeSlide var(--t-spring); }
.aplic-detalhe h4 { margin: 0 0 var(--s-3); font-size: var(--fs-lg); font-weight: 700; color: var(--purple-deep); }
.aplic-detalhe ul { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--s-2); }
.aplic-detalhe li { padding-left: 22px; position: relative; font-size: var(--fs-sm); }
.aplic-detalhe li::before { content: '◆'; position: absolute; left: 0; top: 2px; color: var(--orange); font-size: 11px; }
/* ROTEIRO numerado */
.roteiro { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-xl); box-shadow: var(--shadow-md); padding: var(--s-7); }
.roteiro-grid { display: grid; gap: var(--s-5); }
.roteiro-item { display: grid; grid-template-columns: 64px 1fr; gap: var(--s-5); align-items: start; }
.roteiro-num { width: 56px; height: 56px; background: var(--magenta); color: #fff; border-radius: 50%; display: grid; place-items: center; font-family: 'JetBrains Mono', monospace; font-weight: 800; font-size: var(--fs-lg); box-shadow: var(--shadow-sm); }
.roteiro-conteudo h4 { margin: 0 0 var(--s-2); font-size: var(--fs-lg); font-weight: 700; color: var(--purple-deep); letter-spacing: -.01em; }
.roteiro-conteudo p { margin: 0 0 var(--s-2); font-size: var(--fs-sm); line-height: 1.6; }
.roteiro-conteudo .roteiro-dica { background: var(--yellow-soft); border-left: 3px solid var(--yellow); border-radius: 0 var(--r-sm) var(--r-sm) 0; padding: var(--s-3) var(--s-4); font-size: var(--fs-sm); margin-top: var(--s-2); }
.roteiro-conteudo .roteiro-dica b { color: var(--orange); }
/* CARDS COMPARATIVOS NUMERADOS */
.teste-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--s-4); }
.teste-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); padding: var(--s-5); transition: all var(--t-fast); }
.teste-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.teste-card-num { width: 36px; height: 36px; border-radius: 50%; background: var(--magenta); color: #fff; font-family: 'JetBrains Mono', monospace; font-weight: 800; display: grid; place-items: center; margin-bottom: var(--s-3); }
.teste-card h4 { margin: 0 0 var(--s-2); font-size: var(--fs-base); font-weight: 700; color: var(--purple-deep); }
.teste-card p { margin: 0 0 var(--s-3); font-size: var(--fs-sm); color: var(--text); line-height: 1.55; }
.teste-card svg { width: 100%; height: 80px; background: var(--bg-2); border-radius: var(--r-sm); padding: var(--s-2); }
/* DUAL CARD para conceitos opostos */
.dual-card { background: var(--purple-deep); color: #fff; border-radius: var(--r-xl); padding: var(--s-8); display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-7); box-shadow: var(--shadow-xl); }
.dual-card-bloco h4 { font-size: var(--fs-xs); color: var(--yellow); text-transform: uppercase; letter-spacing: .12em; margin: 0 0 var(--s-3); font-weight: 700; }
.dual-card-bloco p { font-size: var(--fs-sm); margin: 0 0 var(--s-3); color: rgba(255,255,255,.92); }
.dual-card-bloco .inner { background: rgba(255,255,255,.07); padding: var(--s-5); border-radius: var(--r-md); border-left: 4px solid var(--green); }
.dual-card-bloco.bad .inner { border-color: var(--red); }
.dual-card-bloco h5 { margin: 0 0 var(--s-2); font-size: var(--fs-lg); font-weight: 700; color: var(--green); }
.dual-card-bloco.bad h5 { color: #FFA8A8; }
/* RESPONSIVO */
@media (max-width: 880px) { .bento { grid-template-columns: 1fr; } .hero-stats { grid-template-columns: 1fr 1fr; } .instrumento-grid { grid-template-columns: 1fr; } .sim-block { grid-template-columns: 1fr; } .dual-card { grid-template-columns: 1fr; } .tabela-comparativa { overflow-x: auto; } .roteiro-item { grid-template-columns: 48px 1fr; gap: var(--s-3); } .roteiro-num { width: 44px; height: 44px; font-size: var(--fs-base); } }
@media (max-width: 560px) { main { padding: var(--s-6) var(--s-4); } .hero { padding: var(--s-7) var(--s-5); } .hero-stats { grid-template-columns: 1fr; } .objetivos, .aside-info, .exercicio { padding: var(--s-5); } .instrumento-header { grid-template-columns: 56px 1fr 24px; gap: var(--s-3); padding: var(--s-4); } .instrumento-num { width: 48px; height: 48px; font-size: var(--fs-lg); } }

/* ===== NOTAS — Premium ===== */
.btn-notas {
  position: fixed; right: var(--s-5);
  bottom: calc(var(--s-5) + 64px + env(safe-area-inset-bottom, 0px));
  width: 52px; height: 52px; border-radius: 14px;
  background: var(--magenta);
  color: #fff; border: none; cursor: pointer;
  display: grid; place-items: center;
  box-shadow: 0 4px 20px rgba(190,30,92,.38), 0 1px 4px rgba(0,0,0,.12), inset 0 1px 0 rgba(255,255,255,.18);
  z-index: 90; transition: transform var(--t-spring), box-shadow var(--t-fast);
  -webkit-tap-highlight-color: transparent;
}
.btn-notas:hover { transform: scale(1.07) translateY(-2px); box-shadow: 0 8px 28px rgba(190,30,92,.45), 0 2px 8px rgba(0,0,0,.14); }
.btn-notas:active { transform: scale(.93); box-shadow: 0 2px 8px rgba(190,30,92,.3); }
.btn-notas svg { pointer-events: none; }

.notas-panel {
  position: fixed; right: 0; top: 0; height: 100%; height: 100dvh;
  width: 360px; max-width: 92vw; background: var(--surface);
  border-left: 1px solid var(--border); box-shadow: var(--shadow-xl);
  z-index: 200; transform: translateX(100%); transition: transform var(--t-spring);
  display: flex; flex-direction: column; overflow: hidden;
}
.notas-panel.open { transform: translateX(0); }

.notas-drag-handle { display: none; width: 40px; height: 4px; background: rgba(255,255,255,.3); border-radius: 2px; margin: 0 auto 14px; }

.notas-header {
  padding: var(--s-5); position: relative; flex-shrink: 0;
  background: var(--purple-deep);
  color: #fff; border-bottom: 1px solid rgba(255,255,255,.06);
}
.notas-header-brand { display: flex; align-items: center; gap: var(--s-3); }
.notas-header-icon {
  width: 40px; height: 40px; flex-shrink: 0; border-radius: var(--r-md);
  background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.18);
  display: grid; place-items: center;
}
.notas-header-icon svg { color: rgba(255,255,255,.9); }
.notas-header h4 { margin: 0 0 1px; font-size: var(--fs-sm); font-weight: 800; letter-spacing: -.01em; }
.notas-subtitulo { font-size: .7rem; opacity: .6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 210px; }
.notas-close {
  position: absolute; right: var(--s-4); top: var(--s-4);
  background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.2);
  color: rgba(255,255,255,.85); width: 30px; height: 30px; border-radius: 50%;
  cursor: pointer; display: grid; place-items: center;
  transition: background var(--t-fast); -webkit-tap-highlight-color: transparent;
}
.notas-close:hover { background: rgba(255,255,255,.22); }
.notas-close svg { pointer-events: none; }

.notas-body {
  flex: 1; display: flex; flex-direction: column;
  padding: var(--s-4); gap: 10px; overflow: hidden;
  background: #F6F1FC;
}

/* Barra de formatação */
.notas-toolbar {
  display: flex; align-items: center; gap: 1px; flex-shrink: 0; flex-wrap: wrap;
  padding: 5px 8px; background: rgba(255,255,255,.75);
  border: 1px solid rgba(200,185,225,.5); border-radius: 10px;
}
.ntb {
  width: 30px; height: 30px; display: grid; place-items: center;
  border: none; background: transparent; border-radius: 7px;
  cursor: pointer; color: var(--text-mute); font-family: inherit;
  font-size: .72rem; font-weight: 800; transition: all var(--t-fast);
  -webkit-tap-highlight-color: transparent; line-height: 1;
}
.ntb:hover { background: rgba(75,27,122,.1); color: var(--purple-deep); }
.ntb.active { background: var(--purple-mid); color: #fff; box-shadow: 0 1px 4px rgba(75,27,122,.3); }
.ntb svg { pointer-events: none; }
.ntb sub, .ntb sup { font-size: .55em; font-weight: 900; }
.ntb-sep { width: 1px; height: 18px; background: var(--border); margin: 0 4px; flex-shrink: 0; }

/* Editor contenteditable — caderno premium */
.notas-editor {
  flex: 1; overflow-y: auto; min-height: 80px;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: .9rem; color: var(--text); line-height: 1.85;
  border: none; border-radius: 14px; padding: 18px 20px;
  background: #ffffff;
  background-image: repeating-linear-gradient(
    transparent, transparent calc(1.85em - 1px),
    rgba(195,175,225,.22) calc(1.85em - 1px),
    rgba(195,175,225,.22) 1.85em
  );
  background-attachment: local;
  box-shadow: 0 2px 8px rgba(45,10,78,.07), 0 1px 2px rgba(45,10,78,.05), inset 0 1px 0 rgba(255,255,255,.9);
  transition: box-shadow var(--t-fast); caret-color: var(--purple-mid);
  outline: none; -webkit-overflow-scrolling: touch;
}
.notas-editor:empty::before {
  content: attr(data-placeholder);
  color: rgba(94,72,128,.38); font-style: italic; pointer-events: none;
}
.notas-editor:focus { box-shadow: 0 0 0 2.5px var(--purple-mid), 0 6px 20px rgba(75,27,122,.14); }
.notas-editor b, .notas-editor strong { font-weight: 800; }
.notas-editor i, .notas-editor em { font-style: italic; }
.notas-editor u { text-decoration: underline; text-underline-offset: 2px; }
.notas-editor s { text-decoration: line-through; opacity: .65; }
.notas-editor.sz-small { font-size: .78rem; }
.notas-editor.sz-large { font-size: 1.06rem; }

/* Status bar */
.notas-status {
  display: flex; align-items: center; justify-content: space-between; padding: 0 2px;
}
.notas-saved {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: .68rem; font-weight: 700; color: var(--green);
  opacity: 0; transition: opacity .3s ease; pointer-events: none;
}
.notas-saved.show { opacity: 1; }
.notas-saved svg { flex-shrink: 0; }
.notas-wc {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: .68rem; font-weight: 600; color: var(--text-mute);
  background: rgba(255,255,255,.7); border: 1px solid rgba(200,185,225,.6);
  padding: 3px 10px; border-radius: 999px;
}
.notas-wc svg { flex-shrink: 0; }

/* Botões */
.notas-actions { display: flex; gap: 8px; }
.notas-btn {
  flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 11px var(--s-3); border-radius: 12px; font-family: inherit;
  font-size: var(--fs-xs); font-weight: 700; cursor: pointer;
  border: 1.5px solid transparent; transition: all var(--t-fast);
  -webkit-tap-highlight-color: transparent; min-height: 46px; letter-spacing: .01em;
}
.notas-btn svg { pointer-events: none; flex-shrink: 0; }
.notas-btn.primario {
  background: #2D0A4E;
  color: #fff;
  box-shadow: 0 3px 14px rgba(45,10,78,.32), inset 0 1px 0 rgba(255,255,255,.15);
}
.notas-btn.primario:hover { background: #3D1268; transform: translateY(-1px); box-shadow: 0 6px 20px rgba(45,10,78,.38), inset 0 1px 0 rgba(255,255,255,.15); }
.notas-btn.primario:active { transform: translateY(0); }
.notas-btn.limpar {
  background: rgba(255,255,255,.6); color: var(--red);
  border-color: rgba(214,69,69,.22);
  box-shadow: 0 1px 4px rgba(0,0,0,.04);
}
.notas-btn.limpar:hover { background: var(--red-soft); border-color: rgba(214,69,69,.5); }

.notas-overlay { position: fixed; inset: 0; background: rgba(29,5,55,.35); z-index: 199; opacity: 0; pointer-events: none; transition: opacity .2s ease; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.notas-overlay.show { opacity: 1; pointer-events: all; }

/* ===== TIMER DE ESTUDO — Premium ===== */
.header-timer {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: 'JetBrains Mono', monospace; font-size: .72rem;
  color: var(--text-mute); background: var(--surface);
  border: 1.5px solid var(--border); padding: 5px 11px 5px 9px;
  border-radius: 999px; font-weight: 600; user-select: none;
  letter-spacing: .03em; transition: color var(--t-fast), background var(--t-fast), border-color var(--t-fast), box-shadow var(--t-fast);
}
.header-timer svg { color: var(--text-mute); flex-shrink: 0; transition: color var(--t-fast); }
.header-timer.ativo { color: var(--purple-deep); border-color: var(--purple-mid); background: #EDE6F8; box-shadow: 0 0 0 3px rgba(75,27,122,.07); }
.header-timer.ativo svg { color: var(--purple-mid); }

/* ===== NOTAS — Mobile bottom sheet ===== */
@media (max-width: 620px) {
  .notas-panel {
    right: 0; left: 0; top: auto; bottom: 0;
    height: 82dvh; width: 100%; max-width: 100%;
    border-radius: 20px 20px 0 0;
    transform: translateY(100%);
    border-left: none; border-top: 1px solid var(--border);
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  .notas-panel.open { transform: translateY(0); }
  .notas-drag-handle { display: block; }
  .notas-header { border-radius: 20px 20px 0 0; }
  .btn-notas { bottom: calc(var(--s-4) + 64px + env(safe-area-inset-bottom, 0px)); right: var(--s-4); }
  .header-timer { font-size: .65rem; padding: 4px 8px 4px 7px; }
}

/* ===== _ava-base.css ===== */
/* ============================================================
   INTRODUCAO AO AVA - componentes compartilhados das 4 aulas
   Complementa _v3-base.css. Carregar DEPOIS dele.
   Mesquita Digital - Cursos Tecnicos EAD
   ============================================================ */

/* ---------- Tabela de termos técnicos (Termo | Categoria | O que é | Onde aparece) ---------- */
.termos { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-md); margin: var(--s-5) 0; }
.termos-scroll { overflow-x: auto; }
.termos table { width: 100%; border-collapse: collapse; min-width: 640px; }
.termos thead { background: var(--purple-deep); }
.termos thead th { color: #fff; text-align: left; padding: var(--s-4) var(--s-5); font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.termos tbody td { padding: var(--s-4) var(--s-5); border-bottom: 1px solid var(--border); font-size: 14.5px; vertical-align: top; }
.termos tbody tr:last-child td { border-bottom: none; }
.termos tbody tr:hover { background: var(--bg-2); }
.termos .tm { font-weight: 700; color: var(--purple-deep); font-size: var(--fs-base); }
.termos .cat { font-family: 'JetBrains Mono', monospace; color: var(--magenta); font-size: 13px; white-space: nowrap; }
.termos .def { color: var(--text); }
.termos .onde { color: var(--text-mute); font-size: 13.5px; font-style: italic; }

/* Chip técnico para uso inline no texto corrido */
.chip { font-family: 'JetBrains Mono', monospace; font-size: .85em; color: var(--magenta); background: var(--magenta-soft); border-radius: 5px; padding: 1px 6px; white-space: nowrap; font-weight: 600; }

/* ---------- Bloco de tela / especificação / saída de máquina ---------- */
.tela { background: #FBFAFF; border: 1px solid var(--border-strong); border-left: 5px solid var(--purple-deep); border-radius: var(--r-md); padding: var(--s-5) var(--s-6); margin: var(--s-5) 0; box-shadow: var(--shadow-sm); }
.tela-tag { display: inline-block; font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: #fff; background: var(--purple-deep); border-radius: 999px; padding: 3px 12px; margin-bottom: var(--s-3); }
.tela-txt { font-family: 'JetBrains Mono', monospace; font-size: 14px; line-height: 1.85; color: var(--text); white-space: pre-wrap; margin: 0; }
.tela-txt b { color: var(--purple-deep); background: var(--yellow-soft); padding: 0 3px; border-radius: 3px; }
.tela-leitura { margin: var(--s-4) 0 0; padding-top: var(--s-4); border-top: 1px dashed var(--border-strong); font-size: 14px; color: var(--text-mute); }
.tela-leitura b { color: var(--purple-deep); }

/* ---------- Fluxo de etapas (entrada → processamento → saída) ---------- */
.fluxo { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--s-3); margin: var(--s-5) 0; }
.fluxo-etapa { position: relative; background: var(--surface); border: 2px solid var(--border-strong); border-radius: var(--r-md); padding: var(--s-5) var(--s-4); text-align: center; box-shadow: var(--shadow-sm); }
.fluxo-etapa .fl-ico { display: flex; justify-content: center; margin-bottom: var(--s-3); color: var(--purple-deep); }
.fluxo-etapa .fl-nome { font-weight: 800; color: var(--purple-deep); font-size: 15px; margin-bottom: var(--s-2); }
.fluxo-etapa .fl-desc { font-size: 13.5px; color: var(--text-mute); line-height: 1.55; }
.fluxo-etapa.destaque { border-color: var(--magenta); background: #FFF9FC; }

/* ---------- Cards de armadilha (erro × correto) ---------- */
.armadilha-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--s-4); margin-top: var(--s-5); }
.armadilha-card { background: var(--surface); border: 1px solid var(--red); border-radius: var(--r-md); padding: var(--s-5); box-shadow: var(--shadow-sm); }
.armadilha-card .titulo { display: flex; align-items: center; gap: var(--s-2); font-weight: 700; color: var(--red); margin-bottom: var(--s-3); font-size: var(--fs-base); }
.armadilha-card .errado { font-family: 'JetBrains Mono', monospace; padding: var(--s-2) var(--s-3); background: var(--red-soft); color: var(--red); border-radius: var(--r-sm); margin-bottom: var(--s-2); font-weight: 600; font-size: 13.5px; }
.armadilha-card .certo { font-family: 'JetBrains Mono', monospace; padding: var(--s-2) var(--s-3); background: var(--green-soft); color: #4D8226; border-radius: var(--r-sm); margin-bottom: var(--s-3); font-weight: 600; font-size: 13.5px; }
.armadilha-card .explica { font-size: 14px; color: var(--text); margin: 0; line-height: 1.6; }

/* ---------- Abas e controles do simulador ---------- */
.sim-tabs { display: flex; gap: var(--s-2); flex-wrap: wrap; margin-bottom: var(--s-5); border-bottom: 2px solid var(--border); padding-bottom: var(--s-4); }
.sim-tab { padding: var(--s-3) var(--s-5); border: 2px solid var(--border-strong); background: var(--surface); color: var(--purple-deep); border-radius: 999px; font-family: inherit; font-weight: 700; font-size: 14px; cursor: pointer; transition: all var(--t-fast); min-height: 42px; }
.sim-tab:hover { border-color: var(--magenta); color: var(--magenta); }
.sim-tab.active { background: var(--magenta); border-color: transparent; color: #fff; box-shadow: var(--shadow-md); }
.sim-btn { padding: var(--s-4) var(--s-6); background: var(--magenta); color: #fff; border: none; border-radius: var(--r-md); font-family: inherit; font-weight: 800; font-size: 15px; cursor: pointer; transition: transform var(--t-spring); min-height: 44px; }
.sim-btn:hover:not(:disabled) { transform: translateY(-2px); }
.sim-btn:disabled { opacity: .45; cursor: default; }
.sim-btn-sec { padding: var(--s-3) var(--s-5); background: var(--surface); border: 2px solid var(--border-strong); color: var(--purple-deep); border-radius: var(--r-md); font-family: inherit; font-weight: 700; font-size: 15px; cursor: pointer; transition: all var(--t-fast); min-height: 44px; }
.sim-btn-sec:hover:not(:disabled) { border-color: var(--magenta); color: var(--magenta); }
.sim-btn-sec:disabled { opacity: .45; cursor: default; }
.sim-linha { display: flex; gap: var(--s-3); flex-wrap: wrap; align-items: center; margin-bottom: var(--s-5); }
.sim-input { flex: 1; min-width: 160px; padding: var(--s-4); border: 2px solid var(--border-strong); border-radius: var(--r-md); font-family: inherit; font-size: var(--fs-base); font-weight: 600; color: var(--purple-deep); }
.sim-input:focus { outline: none; border-color: var(--magenta); }
.sim-palco { background: var(--bg-2); border: 1px solid var(--border); border-radius: var(--r-md); padding: var(--s-5); min-height: 200px; }
.sim-placar { font-family: 'JetBrains Mono', monospace; font-weight: 700; font-size: 14px; color: var(--purple-deep); background: var(--yellow-soft); border: 1px solid var(--yellow); padding: var(--s-2) var(--s-3); border-radius: var(--r-sm); }

/* Feedback do simulador */
.sim-fb { display: none; margin: var(--s-4) 0; padding: var(--s-4) var(--s-5); border-radius: var(--r-md); font-size: 14.5px; line-height: 1.6; }
.sim-fb.show { display: block; animation: fbDrop .4s cubic-bezier(.34,1.56,.64,1); }
.sim-fb.ok { background: var(--green-soft); border-left: 4px solid var(--green); color: var(--text); }
.sim-fb.err { background: var(--red-soft); border-left: 4px solid var(--red); color: var(--text); }
.sim-fb.neutro { background: var(--yellow-soft); border-left: 4px solid var(--orange); color: var(--text); }
@keyframes fbDrop { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: none; } }

/* Cartão sorteado no palco do simulador */
.sim-card { background: var(--surface); border: 2px solid var(--border-strong); border-radius: var(--r-md); padding: var(--s-5); text-align: center; box-shadow: var(--shadow-sm); }
.sim-card-rotulo { font-size: 13px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--magenta); margin-bottom: var(--s-3); }
.sim-card-txt { font-size: var(--fs-lg); font-weight: 700; color: var(--purple-deep); line-height: 1.5; }
.sim-card-ctx { font-size: 13.5px; color: var(--text-mute); margin-top: var(--s-2); }

/* Baldes de classificação (arraste por clique) */
.sim-baldes { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: var(--s-3); margin-top: var(--s-4); }
.sim-balde { background: var(--surface); border: 2px dashed var(--border-strong); border-radius: var(--r-md); padding: var(--s-4); min-height: 92px; cursor: pointer; transition: all var(--t-fast); text-align: center; font-family: inherit; }
.sim-balde:hover { border-color: var(--magenta); background: var(--magenta-soft); }
.sim-balde.cheio { border-style: solid; border-color: var(--green); background: var(--green-soft); }
.sim-balde-nome { font-weight: 800; color: var(--purple-deep); font-size: 14px; margin-bottom: var(--s-2); }
.sim-balde-itens { font-size: 13px; color: var(--text-mute); line-height: 1.5; }

/* Peças a classificar */
.sim-pecas { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-bottom: var(--s-4); }
.sim-peca { padding: var(--s-3) var(--s-4); background: var(--surface); border: 2px solid var(--border-strong); border-radius: 999px; font-family: inherit; font-size: 14px; font-weight: 600; color: var(--purple-deep); cursor: pointer; transition: all var(--t-fast); }
.sim-peca:hover { border-color: var(--magenta); color: var(--magenta); }
.sim-peca.sel { background: var(--magenta); border-color: transparent; color: #fff; }
.sim-peca.usada { opacity: .35; cursor: default; text-decoration: line-through; }

/* ---------- Case / história real ---------- */
.case { background: #FFF9F0; border: 1px solid var(--orange); border-radius: var(--r-lg); padding: var(--s-6) var(--s-7); margin: var(--s-6) 0; box-shadow: var(--shadow-sm); }
.case-eyebrow { font-size: 13px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--orange); margin-bottom: var(--s-2); }
.case h4 { margin: 0 0 var(--s-3); color: var(--purple-deep); font-size: var(--fs-lg); }
.case p { margin: 0 0 var(--s-3); line-height: 1.7; }
.case p:last-child { margin-bottom: 0; }
.case-licao { margin-top: var(--s-4); padding: var(--s-4) var(--s-5); background: var(--surface); border-left: 4px solid var(--magenta); border-radius: 0 var(--r-md) var(--r-md) 0; font-size: 14.5px; }
.case-licao b { color: var(--magenta); }

/* ---------- Elementos removidos a pedido da coordenação (jul/2026) ----------
   A base injeta estes elementos via JS; desligamos por CSS para manter a base
   compartilhada intacta e reversível. Não remover.
   - Índice lateral flutuante (círculos numerados).
   - Cronômetro de estudo no header (o Prof. André pediu retirar o tempo cronometrado). */
.toc-flutuante { display: none !important; }
.header-timer { display: none !important; }

/* ---------- Tipografia auditada (mesma regra das aulas de Cálculo e Inglês) ---------- */
.hero-stat .l, .section-num, .hero-eyebrow, .instrumento-tag, .aside-info-eyebrow,
.objetivos-titulo, .tab-mono, .exercicio-tag, .q-num, .q-tag, .app-tag, .api-tag,
.btn-pill, .kbd, .label, .legend, .caption, .foot, .foot-meta, .case-eyebrow,
.tela-tag, .sim-card-rotulo {
  font-size: 13px !important; line-height: 1.5 !important; letter-spacing: .06em !important;
}
.instrumento-tags { flex-wrap: wrap; gap: 6px; }
.instrumento-bloco ul li { font-size: 15px !important; line-height: 1.55 !important; }
.tab-t td, .tab-t th, .tabela-comparativa td, .tabela-comparativa th { font-size: 14.5px !important; }
button, .btn, .cta { min-height: 42px; font-size: 15px !important; letter-spacing: 0 !important; }

@media (prefers-reduced-motion: reduce) { .sim-fb.show { animation: none !important; } }
/* Trava anti-espaco-em-branco: se o JS do efeito de entrada falhar, a secao aparece sozinha. */
@keyframes mqRevealFailsafe { to { opacity: 1; transform: none; } }
.reveal:not(.in) { animation: mqRevealFailsafe .4s ease 2.5s forwards; }
@media print { .reveal { opacity: 1 !important; transform: none !important; animation: none !important; } }
/* ---------- Ajustes das aulas de Introducao ao AVA ---------- */
/* A base define .sim-block em duas colunas (canvas + painel). Aqui o simulador e de coluna unica com abas. */
.sim-block { display: block; }
.sim-block .sim-info-box { margin-top: var(--s-5); }
.sim-block [hidden] { display: none !important; }
/* Quadro tabular dentro de .tela: mantem as colunas alinhadas e rola na horizontal no celular. */
.tela-txt.tab { white-space: pre; overflow-x: auto; padding-bottom: var(--s-2); }
@media (max-width: 480px) { .tela-txt.tab { font-size: 11.5px; } .tela { padding: var(--s-4); } }
/* Etiqueta de resultado usada nas calculadoras (frequencia, nota) */
.medidor-status { font-weight: 800; padding: 4px 14px; border-radius: 999px; font-size: 14px; }
.medidor-status.ok { background: var(--green-soft); color: #4D8226; }
.medidor-status.at { background: var(--yellow-soft); color: #8A5A00; }
.medidor-status.rp { background: var(--red-soft); color: var(--red); }

/* ===== extras das disciplinas (união de 49 arquivos) ===== */
/* ---------- Eletricidade: laboratórios, fórmulas e exemplos ---------- */
.lab-ctx { margin-bottom: 8px; }
.lab-caso { background: var(--bg-2); border-left: 4px solid var(--purple-deep); border-radius: 0 var(--r-md) var(--r-md) 0; padding: var(--s-4) var(--s-5); font-size: 15px; line-height: 1.7; margin-bottom: var(--s-4); }
.lab-ops { display: grid; gap: var(--s-3); }
.lab-ops button { text-align: left; white-space: normal; line-height: 1.55; padding: var(--s-4); font-weight: 500 !important; }
.lab-ops button.lab-certa { border-color: var(--green); background: var(--green-soft); }
.lab-ops button.lab-errada { border-color: var(--red); background: var(--red-soft); }
.resp-linha { display: flex; gap: var(--s-3); flex-wrap: wrap; margin-top: var(--s-4); }
.resp-linha .sim-btn-sec { flex: 1; min-width: 150px; }
.lab-ord-pool { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-bottom: var(--s-4); }
.lab-ord-pool button { white-space: normal; text-align: left; font-weight: 600 !important; font-size: 14px !important; }
.lab-ord-feito { display: grid; gap: 6px; margin-bottom: var(--s-3); }
.lab-ord-item { display: grid; grid-template-columns: 96px 1fr; gap: var(--s-3); align-items: baseline; background: var(--green-soft); border-radius: var(--r-sm); padding: 8px 12px; font-size: 14.5px; }
.lab-ord-item b { font-family: 'JetBrains Mono', monospace; color: #4D8226; }
.calc-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: var(--s-5); }
.calc-campo label { display: block; font-weight: 700; color: var(--purple-deep); font-size: 14.5px; margin-bottom: var(--s-2); }
.calc-campo select, .calc-campo input[type=number], .calc-campo input[type=text] { width: 100%; padding: var(--s-3) var(--s-4); border: 2px solid var(--border-strong); border-radius: var(--r-md); font-family: inherit; font-size: 15px; font-weight: 600; color: var(--purple-deep); background: var(--surface); }
.calc-campo input[type=range] { width: 100%; accent-color: var(--magenta); }
.calc-val { font-family: 'JetBrains Mono', monospace; font-weight: 700; color: var(--magenta); }
.medidor { margin-top: var(--s-5); background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); padding: var(--s-5); }
.medidor-topo { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-3); flex-wrap: wrap; }
.medidor-num { font-family: 'JetBrains Mono', monospace; font-size: var(--fs-3xl); font-weight: 700; color: var(--purple-deep); }
.medidor-txt { margin: var(--s-4) 0 0; font-size: 14.5px; line-height: 1.7; }
/* tabela de dados (números reais, com fonte) */
.dados { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-sm); margin: var(--s-5) 0; }
.dados-scroll { overflow-x: auto; }
.dados table { width: 100%; border-collapse: collapse; min-width: 520px; }
.dados th { background: var(--purple-deep); color: #fff; text-align: left; padding: var(--s-3) var(--s-4); font-size: 13px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.dados td { padding: var(--s-3) var(--s-4); border-bottom: 1px solid var(--border); font-size: 14.5px; vertical-align: top; }
.dados tr:last-child td { border-bottom: none; }
.dados td:first-child { font-weight: 700; color: var(--purple-deep); }
.dados-fonte { padding: var(--s-3) var(--s-4); font-size: 13px; color: var(--text-mute); background: var(--bg-2); border-top: 1px solid var(--border); }
/* passos numerados (substitui ícones) */
.passos { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--s-3); margin: var(--s-5) 0; counter-reset: passo; }
.passos > div { counter-increment: passo; background: var(--surface); border: 1px solid var(--border); border-top: 5px solid var(--magenta); border-radius: var(--r-md); padding: var(--s-5) var(--s-4) var(--s-4); box-shadow: var(--shadow-sm); }
.passos > div::before { content: counter(passo); display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--purple-deep); color: #fff; font-family: 'JetBrains Mono', monospace; font-weight: 700; font-size: 14px; margin-bottom: var(--s-2); }
.passos b { display: block; color: var(--purple-deep); margin-bottom: 4px; }
.passos span { font-size: 14px; color: var(--text-mute); line-height: 1.55; display: block; }
.citacao { border-left: 5px solid var(--yellow); background: var(--yellow-soft); border-radius: 0 var(--r-md) var(--r-md) 0; padding: var(--s-4) var(--s-5); margin: var(--s-5) 0; font-size: var(--fs-lg); line-height: 1.6; color: var(--purple-deep); font-weight: 600; }
.citacao small { display: block; margin-top: var(--s-2); font-size: 13.5px; font-weight: 500; color: var(--text-mute); }
@media (max-width: 480px) { .lab-ord-item { grid-template-columns: 72px 1fr; } .medidor-num { font-size: var(--fs-2xl); } }

/* ---------- matemática: fração, fórmula em destaque, exemplo resolvido, treino ---------- */
.fr { display: inline-flex; flex-direction: column; vertical-align: middle; text-align: center; margin: 0 .2em; line-height: 1.15; font-size: .92em; }
.fr > span:first-child { border-bottom: 1.5px solid currentColor; padding: 0 .3em 1px; }
.fr > span:last-child { padding: 1px .3em 0; }
.formula { background: #FBF7FF; border: 1px solid var(--border-strong); border-left: 5px solid var(--magenta); border-radius: var(--r-md); padding: var(--s-5) var(--s-6); margin: var(--s-5) 0; text-align: center; box-shadow: var(--shadow-sm); overflow-x: auto; }
.formula-expr { font-family: 'JetBrains Mono', monospace; font-weight: 700; font-size: var(--fs-xl); color: var(--purple-deep); white-space: nowrap; }
.formula-leg { margin-top: var(--s-3); font-size: 14px; color: var(--text-mute); line-height: 1.6; }
.exemplo { background: var(--surface); border: 1px solid var(--border); border-top: 5px solid var(--green); border-radius: var(--r-md); padding: var(--s-5) var(--s-6); margin: var(--s-5) 0; box-shadow: var(--shadow-sm); }
.exemplo-rot { font-size: 13px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #4D8226; margin-bottom: var(--s-2); }
.exemplo h4 { margin: 0 0 var(--s-2); color: var(--purple-deep); font-size: var(--fs-lg); }
.exemplo-enun { margin: 0 0 var(--s-3); line-height: 1.65; }
.exemplo ol { margin: 0 0 var(--s-3); padding-left: 22px; line-height: 1.85; font-size: 15px; }
.exemplo ol li { margin-bottom: 4px; }
.exemplo-resp { background: var(--green-soft); border-radius: var(--r-sm); padding: var(--s-3) var(--s-4); font-size: 15px; }
.tr-enun { font-size: var(--fs-lg); font-weight: 600; color: var(--purple-deep); line-height: 1.6; }
.tr-resp { margin-top: var(--s-4); }
.tr-resp .sim-input { max-width: 220px; font-family: 'JetBrains Mono', monospace; }
.tr-un { font-weight: 700; color: var(--text-mute); }
.sim-block [hidden] { display: none !important; }
sup, sub { font-size: .72em; line-height: 0; }
@media (max-width: 480px) { .formula-expr { font-size: var(--fs-lg); } .exemplo { padding: var(--s-4); } }

/* ---------- gráficos (estáticos e do laboratório) ---------- */
.graf { margin: var(--s-5) 0; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); padding: var(--s-4); box-shadow: var(--shadow-sm); }
.graf { overflow-x: auto; }
.graf svg { display: block; width: 100%; min-width: 470px; height: auto; max-width: 720px; margin: 0 auto; }
.graf figcaption { margin-top: var(--s-3); font-size: 14px; color: var(--text-mute); line-height: 1.6; text-align: center; }
.graf-rot { display: flex; flex-wrap: wrap; gap: 6px 18px; justify-content: center; margin-top: var(--s-2); font-size: 13px; font-weight: 600; color: var(--text-soft); }
.graf-rot i { display: inline-block; width: 18px; height: 4px; border-radius: 2px; margin-right: 6px; vertical-align: middle; }
.g-b0 { background: #C2185B; } .g-b1 { background: #5E35B1; } .g-b2 { background: #2E7D32; }
.g-grid { stroke: #E6DEEF; stroke-width: 1; }
.g-eixo { stroke: #5B4A75; stroke-width: 1.6; }
.g-vl { stroke: #9C8AB5; stroke-width: 1.4; stroke-dasharray: 5 4; }
  .g-tx { font: 500 12.5px 'JetBrains Mono', monospace; fill: #6B5B85; }
.g-rot { font: 700 13.5px Inter, sans-serif; fill: #3A2456; }
.g-c { fill: none; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.g-c0 { stroke: #C2185B; } .g-c1 { stroke: #5E35B1; } .g-c2 { stroke: #2E7D32; stroke-dasharray: 7 5; }
.g-pt { fill: #fff; stroke: #2B1647; stroke-width: 2.4; }
.g-ptx { font: 700 13.5px Inter, sans-serif; fill: #2B1647; paint-order: stroke; stroke: #fff; stroke-width: 4px; }
.calc-plot { margin: var(--s-4) 0 0; }
.calc-plot[hidden] { display: none; }

/* ---------- figuras geométricas ---------- */
.graf.fig svg { min-width: 400px; max-width: 560px; }
.f-a { fill: #EFE6FA; stroke: #5E35B1; stroke-width: 2.5; stroke-linejoin: round; }
.f-b { fill: #FCE4EC; stroke: #C2185B; stroke-width: 2.5; stroke-linejoin: round; }
.f-v { fill: #E8F5E9; stroke: #2E7D32; stroke-width: 2.5; stroke-linejoin: round; }
.f-l { fill: none; stroke: #2B1647; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.f-d { fill: none; stroke: #8E7BAA; stroke-width: 1.8; stroke-dasharray: 6 5; }
.f-c { fill: none; stroke: #C2185B; stroke-width: 2.2; stroke-linecap: round; }
.f-r { fill: none; stroke: #2B1647; stroke-width: 1.6; }
.f-t { font: 700 15px Inter, sans-serif; fill: #2B1647; }
.f-m { font: 600 14px 'JetBrains Mono', monospace; fill: #AD1457; }
.f-s { font: 500 13px Inter, sans-serif; fill: #5B4A75; }
.calc-campo:has(input[type=text]) { grid-column: 1 / -1; }
.calc-campo input[type=text] { font-family: 'JetBrains Mono', monospace; font-size: 14px; }

/* ---------- símbolos de circuito ---------- */
.c-el { fill: #fff; stroke: #2B1647; stroke-width: 2.5; }
.c-pl { stroke: #2B1647; stroke-width: 3.5; stroke-linecap: round; }
.c-no { fill: #2B1647; }
.c-med { fill: #FFF8E1; stroke: #AD1457; stroke-width: 2.5; }
.c-let { font: 800 15px Inter, sans-serif; fill: #AD1457; }
.f-i { fill: none; stroke: #2E7D32; stroke-width: 2.2; stroke-linecap: round; }
.f-g { font: 700 14px Inter, sans-serif; fill: #2E7D32; }

/* ---- desenho técnico: tipos de linha e faces ---- */
.d-g { fill: none; stroke: #2B1647; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.d-f { fill: none; stroke: #2B1647; stroke-width: 1.1; stroke-linecap: round; }
.d-t { fill: none; stroke: #2B1647; stroke-width: 1.5; stroke-dasharray: 7 4; }
.d-c { fill: none; stroke: #C2185B; stroke-width: 1.1; stroke-dasharray: 16 3 3 3; }
.d-x { fill: none; stroke: #C2185B; stroke-width: 2.8; stroke-linecap: round; stroke-linejoin: round; }
.d-a { fill: none; stroke: #B39DDB; stroke-width: 1; stroke-dasharray: 3 3; }
.d-h { fill: none; stroke: #5E35B1; stroke-width: 1; }
.d-p1 { fill: #EFE6FA; stroke: #2B1647; stroke-width: 2.2; stroke-linejoin: round; }
.d-p2 { fill: #D9C8F2; stroke: #2B1647; stroke-width: 2.2; stroke-linejoin: round; }
.d-p3 { fill: #FAF6FF; stroke: #2B1647; stroke-width: 2.2; stroke-linejoin: round; }
.d-s { fill: #2B1647; stroke: none; }
.d-ct { font: 600 13px 'JetBrains Mono', monospace; fill: #2B1647; }
.d-cl { fill: none; stroke: #2B1647; stroke-width: 2.6; stroke-dasharray: 18 4 3 4; }
.d-2 { fill: none; stroke: #2B1647; stroke-width: 1.1; stroke-dasharray: 16 3 3 3 3 3; }
.d-n { fill: none; stroke: #2B1647; stroke-width: 1.1; stroke-dasharray: 16 3 3 3; }

/* ---- Fundamentos de Computação: bits, memória e código ---- */
.b-0 { fill: #F6F1FC; stroke: #2B1647; stroke-width: 1.8; }
.b-1 { fill: #C2185B; stroke: #2B1647; stroke-width: 1.8; }
.b-t { font: 700 15px 'JetBrains Mono', monospace; fill: #2B1647; }
.b-t1 { font: 700 15px 'JetBrains Mono', monospace; fill: #fff; }
.b-p { font: 600 11px 'JetBrains Mono', monospace; fill: #5B4A75; }
.codigo { background: #1F1235; color: #F3E9FF; font: 500 14px/1.7 'JetBrains Mono', monospace; padding: var(--s-4); border-radius: var(--r-md); overflow-x: auto; white-space: pre; margin: var(--s-4) 0; }
.codigo b { color: #FFB74D; font-weight: 600; }
.codigo i { color: #B39DDB; font-style: normal; }

.tr-fig { margin: var(--s-3) 0 0; padding: var(--s-3); }
.tr-fig svg, .calc-plot svg { margin: 0 auto; }

/* formulas longas de planilha: quebram em qualquer ponto, no celular */
.chip { white-space: normal; overflow-wrap: anywhere; }
.medidor-txt code { overflow-wrap: anywhere; word-break: break-all; }
.sim-card-txt, .tr-enun, .sim-btn-sec { overflow-wrap: anywhere; }
.lab-ops .sim-btn-sec, .resp-linha .sim-btn-sec { white-space: normal; word-break: break-word; max-width: 100%; }
.lab-caso, .sim-fb, .quiz-opcao, .check-op { overflow-wrap: anywhere; }
main p, main li, main h2, main h3, main h4, main button, main label, .quiz-q, .quiz-card { overflow-wrap: anywhere; }

/* bloco de saida de programa */
.saida { background: #0f1720; border-radius: var(--r-md); margin: var(--s-4) 0; overflow: hidden; }
.saida-tag { display: block; font: 600 11px/1 'Inter', sans-serif; letter-spacing: .08em; text-transform: uppercase; color: #9fb3c8; padding: 8px 14px 0; }
.saida pre { margin: 0; padding: 8px 14px 12px; color: #d7f5d0; font: 500 14px/1.6 'JetBrains Mono', monospace; white-space: pre; overflow-x: auto; }
.codigo, .saida pre, .chip, code { font-variant-ligatures: none; font-feature-settings: "liga" 0, "calt" 0; }

/* sem ligaduras de código (>=, !=, &&) em nenhum texto: o aluno precisa ver os caracteres que vai digitar */
body, svg text, .f-m, .f-s, .f-t { font-variant-ligatures: none !important; font-feature-settings: "liga" 0, "calt" 0 !important; }

/* nomes de tabela e de coluna dentro de tabelas */
.col { font-family: 'JetBrains Mono', monospace; font-size: .92em; font-variant-ligatures: none; }

/* === ajustes de acessibilidade e de celular: auditoria 2026-10-12 === */
.checkpoint .ck-opt.wrong, .checkpoint .ck-fb.err, .quiz-card .quiz-opt.wrong, .quiz-card .quiz-fb.err, .quiz-opt.wrong, .ck-opt.wrong, .ck-fb.err, .quiz-fb.err, .armadilha-card .errado, .errado, .medidor-status.rp, .armadilha-card .titulo, .lab-errada { color: #A61E1E; }
.checkpoint .ck-opt.right, .checkpoint .ck-fb.ok, .quiz-card .quiz-opt.correct, .quiz-card .quiz-fb.ok, .ck-opt.right, .ck-fb.ok, .quiz-fb.ok, .armadilha-card .certo, .certo, .medidor-status.ok, .quiz-opt.correct { color: #33611A; }
.medidor-status.at { color: #6F4700; }
.calc-campo input[type=range] { height: 34px; margin: 0; cursor: pointer; touch-action: pan-y; }
.sim-tab, .sim-btn, .sim-btn-sec, .ck-opt, .quiz-opt { min-height: 44px; }
@media (max-width: 820px), (pointer: coarse) {
  .calc-campo select, .calc-campo input[type=number], .calc-campo input[type=text], .sim-input, .exercicio-input, .notas-panel textarea, .notas-textarea { font-size: 16px; }
}
@media (max-height: 500px) and (orientation: landscape) { header { position: static; } }
.notas-panel { max-width: 100vw; overflow-x: hidden; } .notas-header, .notas-body, .notas-header-brand { min-width: 0; max-width: 100%; } .notas-subtitulo, .notas-titulo { overflow-wrap: anywhere; }
.encerramento-next { flex-wrap: wrap; row-gap: 4px; } .encerramento-next > * { min-width: 0; } .encerramento-next-titulo { overflow-wrap: anywhere; flex: 1 1 60%; }
@media (max-width: 480px) { .chip { white-space: normal; overflow-wrap: anywhere; } .encerramento-next { padding: 12px 14px; gap: 8px; } }
@media (max-width: 420px) { main h1, main h2, main h3, .hero h1 { overflow-wrap: break-word; -webkit-hyphens: auto; hyphens: auto; } .hero h1 { font-size: clamp(25px, 7.6vw, 34px); line-height: 1.15; } }
@media (max-width: 640px) {
  .header-bar { padding: 6px 12px; gap: 8px; }
  .header-brand { gap: 8px; min-width: 0; flex: 1; }
  .header-brand > div:last-child { min-width: 0; }
  .header-logo { width: 40px; height: 40px; padding: 3px; border-radius: 8px; flex: none; }
  .header-titulo { font-size: 14px; line-height: 1.2; }
  .header-sub { font-size: 11.5px; line-height: 1.25; margin-top: 0; }
  .header-meta { flex: none; }
  .header-pill { font-size: 11.5px; padding: 3px 9px; max-width: 112px; text-align: center; line-height: 1.25; border-radius: 12px; }
  .btn-topo { width: 44px; height: 44px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); font-size: 18px; }
  .btn-notas { width: 44px; height: 44px; border-radius: 12px; right: 64px; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); }
  main { padding-bottom: 76px; }
  .graf svg { min-width: 600px; }
  .graf.fig svg { min-width: 520px; }
  .graf.tr-fig svg { min-width: 0; }
  .graf { background:
      var(--surface) left center / 36px 100% no-repeat local,
      var(--surface) right center / 36px 100% no-repeat local,
      rgba(60,20,90,.28) left center / 12px 100% no-repeat scroll,
      rgba(60,20,90,.28) right center / 12px 100% no-repeat scroll,
      var(--surface); }
}











}
}











}
}











}
}











}
}











}
}











}
}











}
}











}
}











}
}











}
}






/* ---- Manutenção de Máquinas: bits, memória e código ---- */


.c-seta { fill: #2B1647; stroke: none; }

}
}

/* cartão do simulador 3D, no início do laboratório */
.sim3d-cartao{display:flex;align-items:center;gap:14px;margin:0 0 18px;padding:14px 16px;border-radius:16px;background:#2a1b4d;color:#fff;text-decoration:none;box-shadow:0 6px 18px rgba(42,27,77,.18)}
.sim3d-cartao:hover{filter:brightness(1.08)}
.sim3d-selo{flex:none;width:46px;height:46px;border-radius:12px;background:#c2185b;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:16px;letter-spacing:.04em}
.sim3d-txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.sim3d-txt b{font-size:15px;line-height:1.3}
.sim3d-txt span{font-size:13px;opacity:.85;line-height:1.35}
.sim3d-ir{flex:none;background:#fff;color:#2a1b4d;font-weight:700;font-size:13px;padding:8px 14px;border-radius:999px}
@media(max-width:560px){.sim3d-cartao{flex-wrap:wrap}.sim3d-ir{margin-left:60px}}






/* ---- CNC I: bits, memória e código ---- */



}
}







/* ---- Elementos de Máquina: bits, memória e código ---- */



}
}






/* ---- Hidráulica: bits, memória e código ---- */


}
}






/* ---- Pneumática: bits, memória e código ---- */


}
}









}
}






/* ---- instrumentos de medição (window.MET) ---- */
.m-b { fill: #F6F1FC; stroke: #2B1647; stroke-width: 2; }
.m-c { fill: #E3D7F5; stroke: #2B1647; stroke-width: 2; stroke-linejoin: round; }
.m-w { fill: #fff; stroke: #2B1647; stroke-width: 2; }
.m-t { stroke: #2B1647; stroke-width: 1.5; fill: none; }
.m-x { stroke: #C2185B; stroke-width: 3; fill: none; }
.m-n { font: 600 13px 'JetBrains Mono', monospace; fill: #2B1647; }
.m-ng { font-size: 15px; font-weight: 700; }
.m-nx { fill: #C2185B; font-weight: 700; }
.m-np { font-size: 11px; fill: #5B4A75; }
.m-p { stroke: #C2185B; stroke-width: 3.5; stroke-linecap: round; }
.m-p2 { stroke: #C2185B; stroke-width: 2.2; stroke-linecap: round; }
.m-pc { fill: #2B1647; }
.met-fig svg { margin: 0 auto; }

@media (max-width: 560px) { .tr-fig::after, .met-fig::after { content: 'Deslize a figura para o lado para ver a escala inteira, ou gire o aparelho.'; display: block; font-size: 12px; color: var(--text-mute); text-align: center; margin-top: 6px; } }

}
}






/* ---- Microprocessadores e Microcontroladores: bits, memória e código ---- */



}
}






/* ---- Comandos Elétricos Industriais: bits, memória e código ---- */



}
}






/* ---- Análise de Circuitos: bits, memória e código ---- */



}
}






/* ---- Produção Mecânica II: bits, memória e código ---- */



}
}






/* ---- Eletrônica Analógica: bits, memória e código ---- */



}
}






/* ---- Eletrônica Digital: bits, memória e código ---- */



}
}






/* ---- Eletrônica Básica: bits, memória e código ---- */



}
}






/* ---- Conversão e Armazenamento de Energia: bits, memória e código ---- */


}
}






/* ---- Introdução a Energia Renovável: bits, memória e código ---- */


}
}








}
}








}
}








}
}








}
}








}
}








}
}








}
}








}
}






/* ---- Manutenção de Computadores: bits, memória e código ---- */


}
}








}
}






/* ---- Mecânica Básica: bits, memória e código ---- */


}
}






/* ---- Termodinâmica: bits, memória e código ---- */


}
}








}
}








}
}






/* ---- Materiais: bits, memória e código ---- */


}
}






/* Ingles Tecnico: termos em ingles longos precisam quebrar no celular */
.tela-txt { overflow-wrap: anywhere; }

}
}






}
}






}
}





}
}





}
}
/* ---------- Cálculo Técnico: laboratórios, fórmulas e exemplos ---------- */




}
}
/* ---------- Sociologia do Trabalho: laboratórios e blocos de dados ---------- */
.calc-campo select, .calc-campo input[type=number] { width: 100%; padding: var(--s-3) var(--s-4); border: 2px solid var(--border-strong); border-radius: var(--r-md); font-family: inherit; font-size: 15px; font-weight: 600; color: var(--purple-deep); background: var(--surface); }

}
}

/* ===== _v4.css (piloto de Pneumática) ===== */
/* Web aula v4 (piloto): visual, animações, 3D e RA. Usa as variáveis de _v3-base.css. */

/* ---------- Abertura ---------- */
.v4-hero { padding: var(--s-8) var(--s-7) var(--s-7); }
.v4-hero-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: var(--s-6); align-items: center; }
.v4-hero h1 { margin-bottom: var(--s-4); }
.v4-hero .hero-lead { max-width: 54ch; }
.v4-meta { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-4); }
.v4-meta span { font-size: var(--fs-sm); font-weight: 600; color: var(--purple-deep); background: #fff; border: 1px solid var(--border); border-radius: 999px; padding: 4px 12px; }
.v4-continuar { margin-top: var(--s-4); font: inherit; font-weight: 700; color: #fff; background: var(--magenta); border: 0; border-radius: 999px; padding: 10px 18px; cursor: pointer; box-shadow: var(--shadow-md); }
.v4-continuar:hover { filter: brightness(1.08); }
.v4-hero-ilus svg { width: 100%; height: auto; display: block; }
.v4-sobe { animation: v4Sobe 4.2s cubic-bezier(.45,0,.25,1) infinite; }
@keyframes v4Sobe { 0%, 12% { transform: translateY(0); } 45%, 62% { transform: translateY(-46px); } 95%, 100% { transform: translateY(0); } }
.v4-perguntas { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-3); margin-top: var(--s-6); }
.v4-perg { position: relative; display: flex; flex-direction: column; gap: 2px; text-decoration: none; color: var(--text); background: #fff; border: 1px solid var(--border); border-radius: var(--r-lg); padding: var(--s-4) var(--s-4) var(--s-5); box-shadow: var(--shadow-sm); transition: transform var(--t-fast), box-shadow var(--t-fast); }
.v4-perg:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.v4-perg-n { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; color: #fff; background: var(--magenta); margin-bottom: 6px; }
.v4-perg b { font-size: var(--fs-lg); color: var(--purple-deep); }
.v4-perg span { font-size: var(--fs-sm); }
.v4-perg small { color: var(--text-mute); font-size: var(--fs-xs); }
.v4-perg-bar { position: absolute; left: var(--s-4); right: var(--s-4); bottom: 10px; height: 4px; border-radius: 4px; background: var(--bg-2); overflow: hidden; }
.v4-perg-bar i { display: block; height: 100%; width: 0; background: var(--magenta); transition: width .3s; }
.v4-perg.feito .v4-perg-n { background: var(--green); }
.v4-mais { margin-top: var(--s-5); }
.v4-mais summary, .v4-aprof summary { cursor: pointer; font-weight: 700; color: var(--purple-mid); list-style: none; display: inline-flex; align-items: center; gap: 8px; }
.v4-mais summary::-webkit-details-marker, .v4-aprof summary::-webkit-details-marker { display: none; }
.v4-mais summary::before, .v4-aprof summary::before { content: '+'; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--bg-2); border: 1px solid var(--border-strong); font-weight: 800; }
.v4-mais[open] summary::before, .v4-aprof[open] summary::before { content: '−'; }
.v4-mais p { margin-top: var(--s-3); color: var(--text-mute); }

/* ---------- Blocos visuais genéricos ---------- */
.v4-fig { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-md); padding: var(--s-5); margin: var(--s-6) 0; }
.v4-fig-tag { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--magenta); margin-bottom: var(--s-2); }
.v4-fig-tag::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--magenta); box-shadow: 0 0 0 4px var(--magenta-soft); }
.v4-fig h4 { margin: 0 0 var(--s-2); font-size: var(--fs-lg); color: var(--purple-deep); }
.v4-fig .v4-sub { margin: 0 0 var(--s-4); color: var(--text-mute); font-size: var(--fs-sm); }
.v4-fig svg { width: 100%; height: auto; display: block; overflow: visible; }
.v4-ctrl { display: flex; flex-wrap: wrap; gap: var(--s-3) var(--s-5); align-items: flex-end; margin-top: var(--s-4); }
.v4-ctrl label { display: flex; flex-direction: column; gap: 4px; font-size: var(--fs-sm); font-weight: 600; color: var(--purple-deep); min-width: 150px; flex: 1 1 160px; }
.v4-ctrl label output { font-family: 'JetBrains Mono', monospace; color: var(--magenta); font-weight: 700; }
.v4-ctrl input[type=range] { accent-color: var(--magenta); width: 100%; }
.v4-ctrl select, .v4-ctrl input[type=number] { font: inherit; font-weight: 500; padding: 8px 10px; border: 1px solid var(--border-strong); border-radius: var(--r-sm); background: #fff; color: var(--text); width: 100%; }
.v4-btn { font: inherit; font-weight: 700; font-size: var(--fs-sm); padding: 9px 16px; border-radius: 999px; border: 1px solid var(--border-strong); background: #fff; color: var(--purple-deep); cursor: pointer; transition: all var(--t-fast); }
.v4-btn:hover { border-color: var(--magenta); color: var(--magenta); }
.v4-btn.on, .v4-btn.prim { background: var(--purple-deep); border-color: var(--purple-deep); color: #fff; }
.v4-btn.prim:hover { background: var(--magenta); border-color: var(--magenta); color: #fff; }
.v4-btns { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-4); }
.v4-chip { display: inline-block; font-weight: 700; font-size: var(--fs-sm); border-radius: 999px; padding: 5px 12px; }
.v4-ok { background: var(--green-soft); color: #2f6b12; }
.v4-at { background: var(--yellow-soft); color: #7a5a00; }
.v4-al { background: var(--orange-soft); color: #93420b; }
.v4-rp { background: var(--red-soft); color: #9b1f1f; }
.v4-leit { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: var(--s-3); margin-top: var(--s-4); }
.v4-leit div { background: var(--bg); border: 1px solid var(--border); border-radius: var(--r-md); padding: var(--s-3) var(--s-4); }
.v4-leit small { display: block; font-size: var(--fs-xs); color: var(--text-mute); font-weight: 600; }
.v4-leit b { font-family: 'JetBrains Mono', monospace; font-size: var(--fs-lg); color: var(--purple-deep); }
.v4-nota { font-size: var(--fs-sm); color: var(--text-mute); margin-top: var(--s-3); }

/* SVG: traços comuns */
.v4-svg text { font-family: 'Inter', sans-serif; font-size: calc(13px * var(--fz, 1)); fill: var(--text); }
.v4-svg .t-s { font-size: calc(11.5px * var(--fz, 1)); fill: var(--text-mute); }
.v4-svg .t-b { font-weight: 800; fill: var(--purple-deep); }
.v4-svg .t-m { font-family: 'JetBrains Mono', monospace; font-weight: 700; }
.v4-svg .cota { stroke: var(--purple-mid); stroke-width: 1.2; fill: none; }
.v4-svg .ar-av { fill: var(--magenta); }
.v4-svg [data-sym] { transition: stroke .15s, fill .15s, opacity .15s; }
.v4-svg .v4-hl { stroke: var(--orange) !important; stroke-width: 3 !important; }
.v4-svg text.v4-hl { fill: var(--orange) !important; stroke: none !important; font-weight: 800; }
.v4-svg .v4-hl-fill.v4-hl { fill: var(--orange) !important; fill-opacity: .55 !important; }

/* ---------- Fórmula viva ---------- */
.v4-sym { cursor: pointer; border-radius: 4px; padding: 0 2px; background: var(--yellow-soft); box-shadow: inset 0 -2px 0 var(--yellow); transition: background var(--t-fast); }
.v4-sym:hover, .v4-sym.v4-hl, .v4-sym:focus-visible { background: var(--orange); color: #fff; box-shadow: none; outline: none; }
.v4-dica { display: block; margin-top: 6px; font-size: var(--fs-xs); font-weight: 600; color: var(--orange); }
.v4-mk.v4-hl { outline: 3px solid var(--orange); outline-offset: 2px; }

/* ---------- Frase-chave e aprofunde ---------- */
.v4-chave { position: relative; margin: var(--s-6) 0; padding: var(--s-5) var(--s-6) var(--s-5) 64px; border-radius: var(--r-lg); background: var(--purple-deep); color: #fff; font-size: var(--fs-xl); font-weight: 800; line-height: 1.3; letter-spacing: -.01em; box-shadow: var(--shadow-lg); }
.v4-chave::before { content: '!'; position: absolute; left: 20px; top: 50%; transform: translateY(-50%); width: 30px; height: 30px; border-radius: 50%; background: var(--yellow); color: var(--purple-deep); display: grid; place-items: center; font-size: 18px; }
.v4-chave em { font-style: normal; color: var(--yellow); }
.v4-aprof { margin: var(--s-5) 0; background: var(--bg-2); border: 1px dashed var(--border-strong); border-radius: var(--r-md); padding: var(--s-3) var(--s-5); }
.v4-aprof[open] { padding-bottom: var(--s-4); }
.v4-aprof > *:not(summary) { margin-top: var(--s-3); }

/* ---------- Escada de diâmetros ---------- */
.v4-escada svg g.d { cursor: pointer; }
.v4-escada svg g.d .sel-anel { fill: none; stroke: transparent; stroke-width: 3; transition: stroke .2s; }
.v4-escada svg g.d.sel .sel-anel { stroke: var(--magenta); }
.v4-escada svg g.d:hover .sel-anel { stroke: var(--border-strong); }
.v4-escada-info { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 14px; margin-top: var(--s-3); padding: var(--s-4); border-radius: var(--r-md); background: var(--bg); border: 1px solid var(--border); }
.v4-escada-info b { font-family: 'JetBrains Mono', monospace; font-size: var(--fs-2xl); color: var(--magenta); }

/* ---------- Previsão ---------- */
.v4-prev { margin: var(--s-6) 0; border-radius: var(--r-lg); border: 2px solid var(--yellow); background: var(--yellow-soft); padding: var(--s-5); }
.v4-prev-tag { font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #7a5a00; }
.v4-prev-q { font-weight: 700; font-size: var(--fs-lg); color: var(--purple-deep); margin: 4px 0 var(--s-3); }
.v4-prev-linha { display: flex; align-items: center; gap: var(--s-4); flex-wrap: wrap; }
.v4-prev-linha input { flex: 1 1 220px; accent-color: var(--magenta); }
.v4-prev-val { font-family: 'JetBrains Mono', monospace; font-weight: 800; font-size: var(--fs-xl); color: var(--magenta); min-width: 90px; }
.v4-prev-fb { display: none; margin-top: var(--s-4); background: #fff; border-radius: var(--r-md); padding: var(--s-4); border: 1px solid var(--border); }
.v4-prev-fb.show { display: block; animation: v4Entra .35s ease; }
.v4-prev-escala { position: relative; height: 26px; margin-top: var(--s-3); border-radius: 6px; background: var(--bg-2); }
.v4-prev-escala i { position: absolute; top: -4px; bottom: -4px; width: 4px; border-radius: 2px; transform: translateX(-2px); }
.v4-prev-escala i.palp { background: var(--purple-mid); }
.v4-prev-escala i.cert { background: var(--green); }
.v4-prev-escala span { position: absolute; top: 30px; font-size: 11px; font-weight: 700; transform: translateX(-50%); white-space: nowrap; }
@keyframes v4Entra { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ---------- Exemplo passo a passo ---------- */
.exemplo ol li.v4-oculto, .exemplo .exemplo-resp.v4-oculto { display: none; }
.exemplo ol li.v4-novo { animation: v4Entra .35s ease; }
.v4-passo-bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); margin-top: var(--s-3); }
.v4-passo-bar small { color: var(--text-mute); font-weight: 600; }

/* ---------- 3D e RA ---------- */
.v4-3d-palco { position: relative; border-radius: var(--r-md); overflow: hidden; background: #fff; border: 1px solid var(--border); aspect-ratio: 16 / 8; min-height: 260px; }
.v4-3d-palco model-viewer { width: 100%; height: 100%; --poster-color: transparent; }
.v4-3d-capa { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; padding: var(--s-4); }
.v4-3d-capa svg { width: min(560px, 92%); opacity: .9; }
.v4-3d-capa .v4-btn { margin-top: var(--s-3); }
.v4-hs { width: 30px; height: 30px; border-radius: 50%; border: 2px solid #fff; background: var(--magenta); color: #fff; font-weight: 800; font-size: 13px; cursor: pointer; box-shadow: 0 2px 8px rgba(45,10,78,.35); padding: 0; }
.v4-hs.sel { background: var(--orange); transform: scale(1.15); }
.v4-3d-info { margin-top: var(--s-4); min-height: 64px; padding: var(--s-4); border-radius: var(--r-md); background: var(--bg); border-left: 4px solid var(--magenta); }
.v4-3d-info b { color: var(--purple-deep); }
.v4-ra { display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: center; margin-top: var(--s-4); padding: var(--s-4); border-radius: var(--r-md); background: var(--purple-deep); color: #fff; }
.v4-ra p { margin: 0; flex: 1 1 260px; font-size: var(--fs-sm); }
.v4-ra .v4-btn { background: var(--yellow); border-color: var(--yellow); color: var(--purple-deep); }
.v4-ra .v4-btn[disabled] { opacity: .55; cursor: not-allowed; }

/* ---------- Barra empilhada (fator de carga) ---------- */
.v4-pilha { display: flex; height: 34px; border-radius: 8px; overflow: hidden; margin-top: var(--s-4); border: 1px solid var(--border); font-size: 12px; font-weight: 700; color: #fff; }
.v4-pilha div { display: flex; align-items: center; justify-content: center; white-space: nowrap; overflow: hidden; transition: width .3s; }
.v4-pilha .c { background: var(--purple-mid); }
.v4-pilha .a { background: #9a8fb0; }
.v4-pilha .s { background: var(--green); }
.v4-pilha .f { background: var(--red); }

/* ---------- Medidor de flambagem ---------- */
.v4-gauge { position: relative; height: 18px; border-radius: 9px; background: linear-gradient(90deg, var(--green-soft) 0%, var(--green-soft) var(--a, 20%), var(--yellow-soft) var(--a, 20%), var(--yellow-soft) var(--k, 80%), var(--red-soft) var(--k, 80%)); border: 1px solid var(--border); margin: 34px 0 28px; }
.v4-gauge .mk { position: absolute; top: -6px; bottom: -6px; width: 3px; transform: translateX(-1.5px); border-radius: 2px; }
.v4-gauge .mk span { position: absolute; left: 50%; transform: translateX(-50%); font-size: 11px; font-weight: 800; white-space: nowrap; }
.v4-gauge .mk.adm { background: #c99700; } .v4-gauge .mk.adm span { top: -20px; color: #7a5a00; }
.v4-gauge .mk.fk { background: var(--red); } .v4-gauge .mk.fk span { top: -20px; color: var(--red); }
.v4-gauge .mk.f { background: var(--purple-deep); width: 5px; } .v4-gauge .mk.f span { bottom: -22px; color: var(--purple-deep); }

/* ---------- Cartões de fixação ---------- */
.v4-fix { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: var(--s-3); margin: var(--s-5) 0 var(--s-2); }
.v4-fix button { font: inherit; text-align: left; background: #fff; border: 1px solid var(--border); border-radius: var(--r-md); padding: var(--s-3); cursor: pointer; transition: all var(--t-fast); color: var(--text); }
.v4-fix button:hover, .v4-fix button.sel { border-color: var(--magenta); box-shadow: var(--shadow-md); }
.v4-fix svg { width: 100%; height: auto; display: block; margin-bottom: 6px; }
.v4-fix b { display: block; font-family: 'JetBrains Mono', monospace; font-size: var(--fs-xl); color: var(--magenta); }
.v4-fix span { font-size: var(--fs-sm); }

/* ---------- Case com linha do tempo e decisão ---------- */
.v4-case-ilus { margin: var(--s-4) 0; border-radius: var(--r-md); overflow: hidden; background: #241040; }
.v4-case-ilus svg { width: 100%; height: auto; display: block; }
.v4-linha { list-style: none; display: flex; gap: 0; margin: var(--s-5) 0; padding: 0; overflow-x: auto; scrollbar-width: thin; }
.v4-linha li { position: relative; flex: 1 0 130px; padding: 26px 10px 0 0; font-size: var(--fs-sm); }
.v4-linha li::before { content: ''; position: absolute; left: 0; right: 0; top: 8px; height: 3px; background: var(--border-strong); }
.v4-linha li::after { content: ''; position: absolute; left: 0; top: 2px; width: 15px; height: 15px; border-radius: 50%; background: var(--magenta); border: 3px solid #fff; box-shadow: 0 0 0 1px var(--magenta); }
.v4-linha li b { display: block; font-family: 'JetBrains Mono', monospace; color: var(--magenta); font-size: var(--fs-base); }
.v4-linha li.v4-spoiler { color: transparent; }
.v4-linha li.v4-spoiler b { color: var(--text-mute); }
.v4-linha li.v4-spoiler::after { background: var(--border-strong); box-shadow: 0 0 0 1px var(--border-strong); }
.v4-linha li.v4-spoiler .esc { color: var(--text-mute); }
.v4-linha li:not(.v4-spoiler) .esc { display: none; }
.v4-decide { margin: var(--s-5) 0; padding: var(--s-5); border-radius: var(--r-lg); background: #fff; border: 2px solid var(--purple-mid); box-shadow: var(--shadow-md); }
.v4-decide-tag { font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--purple-mid); }
.v4-decide p.q { font-weight: 700; color: var(--purple-deep); font-size: var(--fs-lg); margin: 4px 0 var(--s-3); }
.v4-decide .ops { display: grid; gap: var(--s-2); }
.v4-decide .ops button { font: inherit; text-align: left; padding: 12px 14px; border-radius: var(--r-md); border: 1px solid var(--border-strong); background: var(--bg); cursor: pointer; color: var(--text); }
.v4-decide .ops button:hover:not([disabled]) { border-color: var(--magenta); }
.v4-decide .ops button.certa { background: var(--green-soft); border-color: var(--green); font-weight: 600; }
.v4-decide .ops button.errada { background: var(--red-soft); border-color: var(--red); }
.v4-decide .fb { margin-top: var(--s-3); font-weight: 600; }
.v4-case-resto[hidden] { display: none; }
.v4-case-resto { animation: v4Entra .4s ease; }

/* ---------- Bancada de dimensionamento ---------- */
.v4-banc { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-xl); box-shadow: var(--shadow-lg); padding: var(--s-6); margin: var(--s-5) 0 var(--s-7); }
.v4-banc-grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: var(--s-5); align-items: start; margin-top: var(--s-3); }
.v4-banc-lado { position: sticky; top: 118px; max-height: calc(100vh - 130px); overflow: auto; }
.v4-banc-lado .v4-ficha { margin-top: var(--s-3); }
.v4-banc-desenho { border-radius: var(--r-md); background: #fff; border: 1px solid var(--border); padding: var(--s-3); }
.v4-etapa { border: 1px solid var(--border); border-radius: var(--r-lg); padding: var(--s-4) var(--s-5) var(--s-5); margin: 0 0 var(--s-4); }
.v4-etapa legend { display: flex; align-items: center; gap: 10px; padding: 0 8px; font-weight: 800; color: var(--purple-deep); }
.v4-etapa legend i { font-style: normal; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: var(--purple-mid); font-size: 13px; }
.v4-etapa.ok legend i { background: var(--green); }
.v4-etapa.rp legend i { background: var(--red); }
.v4-etapa.at legend i { background: #c99700; }
.v4-etapa .res { margin-top: var(--s-4); padding: var(--s-3) var(--s-4); border-radius: var(--r-md); background: var(--bg); font-size: var(--fs-sm); }
.v4-etapa .res b { color: var(--purple-deep); }
.v4-ficha { margin-top: var(--s-5); border: 2px solid var(--purple-deep); border-radius: var(--r-lg); overflow: hidden; background: #fff; }
.v4-ficha-cab { display: flex; justify-content: space-between; align-items: center; gap: var(--s-3); flex-wrap: wrap; background: var(--purple-deep); color: #fff; padding: var(--s-4) var(--s-5); }
.v4-ficha-cab b { font-size: var(--fs-lg); }
.v4-ficha table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.v4-ficha td { padding: 9px var(--s-5); border-bottom: 1px solid var(--border); vertical-align: top; }
.v4-ficha td:first-child { color: var(--text-mute); font-weight: 600; width: 42%; }
.v4-ficha td:last-child { font-family: 'JetBrains Mono', monospace; font-weight: 700; color: var(--purple-deep); }

/* ---------- Encontre o defeito ---------- */
.v4-memo { background: #FFFDF5; border: 1px solid #E8DDB8; border-radius: var(--r-md); box-shadow: var(--shadow-md); padding: var(--s-5); font-size: var(--fs-sm); margin: var(--s-5) 0; }
.v4-memo-cab { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 6px; font-family: 'JetBrains Mono', monospace; font-weight: 700; color: var(--purple-deep); border-bottom: 2px solid var(--purple-deep); padding-bottom: 8px; margin-bottom: 8px; }
.v4-memo h5 { margin: var(--s-4) 0 4px; font-size: var(--fs-sm); text-transform: uppercase; letter-spacing: .06em; color: var(--magenta); }
.v4-memo button.ln { display: flex; gap: 10px; width: 100%; text-align: left; font: inherit; font-size: var(--fs-sm); background: transparent; border: 1px solid transparent; border-radius: 6px; padding: 6px 8px; cursor: pointer; color: var(--text); }
.v4-memo button.ln:hover { background: rgba(255,203,5,.18); }
.v4-memo button.ln .n { font-family: 'JetBrains Mono', monospace; color: var(--text-mute); min-width: 22px; }
.v4-memo button.ln.marc { background: var(--yellow-soft); border-color: var(--yellow); }
.v4-memo button.ln.marc .n::after { content: ' ⚑'; color: var(--magenta); }
.v4-memo button.ln.acerto { background: var(--green-soft); border-color: var(--green); }
.v4-memo button.ln.faltou { background: var(--orange-soft); border-color: var(--orange); }
.v4-memo button.ln.falso { background: #eee; border-color: #ccc; }
.v4-memo .exp { display: none; margin: 2px 0 8px 40px; padding: 8px 12px; border-radius: 6px; background: #fff; border-left: 3px solid var(--purple-mid); font-size: var(--fs-sm); }
.v4-memo .exp.show { display: block; animation: v4Entra .3s ease; }
.v4-memo-placar { margin-top: var(--s-4); font-weight: 700; }
.v4-resumo-erros[hidden] { display: none; }

/* ---------- Tabelas que viram cartões no celular ---------- */
@media (max-width: 640px) {
  .v4-tc thead { display: none; }
  .v4-tc, .v4-tc tbody, .v4-tc tr, .v4-tc td { display: block; width: 100%; }
  .v4-tc tr { border: 1px solid var(--border); border-radius: var(--r-md); margin: 0 0 10px; padding: 6px 10px; background: #fff; }
  .v4-tc td { display: flex; justify-content: space-between; gap: 12px; border: 0 !important; padding: 4px 0 !important; text-align: right; }
  .v4-tc td::before { content: attr(data-label); font-weight: 700; color: var(--purple-deep); text-align: left; }
  .v4-tc td:first-child { font-weight: 800; color: var(--magenta); }
}

/* ---------- Celular ---------- */
@media (max-width: 860px) {
  .v4-hero-grid { grid-template-columns: 1fr; }
  .v4-hero-ilus { max-width: 300px; margin: 0 auto; }
  .v4-perguntas { grid-template-columns: 1fr; }
  .v4-banc-grid { grid-template-columns: 1fr; }
  .v4-banc-lado { position: static; order: -1; }
}
@media (max-width: 640px) {
  .v4-hero { padding: var(--s-6) var(--s-4); }
  .v4-fig, .v4-banc { padding: var(--s-4); }
  .v4-chave { font-size: var(--fs-lg); padding: var(--s-4) var(--s-4) var(--s-4) 56px; }
  .v4-3d-palco { aspect-ratio: auto; min-height: 0; height: 320px; }
}

/* ---------- Sem animação para quem pediu ---------- */
@media (prefers-reduced-motion: reduce) {
  .v4-sobe { animation: none; }
  .v4-prev-fb.show, .v4-case-resto, .exemplo ol li.v4-novo { animation: none; }
}

/* ---------- Impressão só da ficha ---------- */
@media print {
  body.v4-imprime * { visibility: hidden !important; }
  body.v4-imprime .v4-ficha, body.v4-imprime .v4-ficha * { visibility: visible !important; }
  body.v4-imprime .v4-ficha { position: absolute; left: 0; top: 0; width: 100%; }
  body.v4-imprime .v4-ficha .v4-btn { display: none; }
}

/* fórmulas longas rolam dentro da caixa no celular */
.v4-viva .formula-expr { overflow-x: auto; max-width: 100%; }
.v4-sym { padding: 0 1px; }

/* parte de baixo da animação avanço/recuo */
.v4-avrec-baixo { display: grid; grid-template-columns: auto auto 1fr; gap: var(--s-4) var(--s-5); align-items: center; margin-top: var(--s-3); }
.v4-area { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; color: var(--text-mute); opacity: .55; transition: opacity .2s; }
.v4-area.on { opacity: 1; }
.v4-area i { width: 64px; height: 64px; border-radius: 50%; background: var(--magenta); }
.v4-area i.anel { background: radial-gradient(circle, #fff 0 34%, #8a8f99 34% 37%, var(--magenta) 37%); }
.v4-area b { color: var(--purple-deep); font-family: 'JetBrains Mono', monospace; }
.v4-forcas { display: grid; gap: 8px; font-size: var(--fs-sm); }
.v4-forcas b { color: var(--purple-deep); }
.v4-forcas .bar { border-radius: 6px; padding: 5px 10px; font-weight: 700; color: var(--purple-deep); background: var(--magenta-soft); transition: all .2s; white-space: nowrap; }
.v4-forcas .bar.on { background: var(--magenta); color: #fff; }
@media (max-width: 640px) { .v4-avrec-baixo { grid-template-columns: 1fr 1fr; } .v4-forcas { grid-column: 1 / -1; } }

/* QR code da realidade aumentada */
.v4-qr { flex: none; width: 136px; padding: 6px; border-radius: 10px; background: #fff; box-shadow: 0 4px 12px rgba(0,0,0,.25); }
.v4-qr svg { width: 100%; height: auto; display: block; }
.v4-ra a.v4-btn { text-decoration: none; }
.v4-ra .so-cel { display: none; }
.v4-qr-aviso { display: block; margin-top: 6px; font-size: 12px; color: var(--yellow); }
@media (max-width: 640px), (pointer: coarse) {
  .v4-qr, .v4-ra .so-pc { display: none; }
  .v4-ra .so-cel { display: inline; }
}

/* esquema pneumático animado junto do corte */
.v4-esq { display: grid; grid-template-columns: minmax(260px, 380px) 1fr; gap: var(--s-5); align-items: center; margin: var(--s-4) 0; padding: var(--s-4); border-radius: var(--r-md); background: var(--bg); border: 1px solid var(--border); }
.v4-esq small { display: block; font-weight: 700; color: var(--magenta); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; margin-bottom: 6px; }
.v4-esq p { margin: 0; font-size: var(--fs-sm); }
.sb-linha { fill: none; stroke: #2D0A4E; stroke-width: 1.6; }
.sb-pres { stroke: var(--magenta); stroke-width: 3; stroke-dasharray: 7 4; animation: sbFlui .7s linear infinite; }
@keyframes sbFlui { to { stroke-dashoffset: -11; } }
.sb-val { transition: transform .35s ease; }
@media (max-width: 640px) { .v4-esq { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .sb-pres { animation: none; } .sb-val { transition: none; } }

.v4-animando .v4-hs { display: none; }

/* desenho em pé no celular */
svg.v4-em-pe { display: block; margin: 0 auto; max-width: 100%; }
g.v4-giro ellipse, g.v4-giro .v4-piso { display: none; }

/* ---------- passada gráfica (render na abertura, etiquetas, painéis dos casos, estúdio 3D) ---------- */
.v4-hero-grid:has(.v4-hero-ilus-largo) { grid-template-columns: 1fr; }
.v4-hero-ilus.v4-hero-ilus-largo { max-width: none; }
.v4-hero-3d { position: relative; border-radius: var(--r-lg); padding: 10px; background: none, repeating-linear-gradient(0deg, #e6def1 0 1px, transparent 1px 16px), repeating-linear-gradient(90deg, #e6def1 0 1px, transparent 1px 16px); border: 1px solid var(--border); box-shadow: var(--shadow-md); }
.v4-hero-3d img { width: 100%; height: auto; display: block; filter: drop-shadow(0 18px 24px rgba(45,10,78,.18)); }
.v4-et { position: absolute; transform: translate(-50%, -50%); background: var(--purple-deep); color: #fff; font-size: 11.5px; font-weight: 700; padding: 3px 9px 3px 18px; border-radius: 999px; white-space: nowrap; box-shadow: 0 3px 10px rgba(45,10,78,.25); pointer-events: none; }
.v4-et::before { content: ''; position: absolute; left: 6px; top: 50%; width: 7px; height: 7px; margin-top: -3.5px; border-radius: 50%; background: var(--yellow); }
@media (max-width: 640px) { .v4-et { font-size: 9.5px; padding: 2px 6px 2px 14px; } }
.v4-case-ilus { background: transparent; }
.v4-ban { display: grid; grid-template-columns: 1fr 1.1fr; align-items: center; gap: var(--s-5); border-radius: var(--r-md); overflow: hidden; padding: var(--s-5) var(--s-6); }
.v4-ban img, .v4-ban svg { width: 100%; height: auto; display: block; max-height: 260px; object-fit: contain; }
.v4-ban-txt { display: flex; flex-direction: column; gap: 6px; }
.v4-ban-txt .v4-ban-ano { font-family: 'JetBrains Mono', monospace; font-weight: 800; font-size: 44px; line-height: 1; letter-spacing: -.02em; }
.v4-ban-txt b { font-size: var(--fs-lg); }
.v4-ban-txt span { font-size: var(--fs-sm); line-height: 1.55; }
.v4-ban-txt small { font-size: 12px; opacity: .75; margin-top: 4px; }
.v4-ban-escuro { background: #1b1030; color: #efe8fa; }
.v4-ban-escuro .v4-ban-txt .v4-ban-ano { color: var(--yellow); }
.v4-ban-papel { background: #fbf4e3; color: #3a2a18; border: 1px solid #d8c59c; }
.v4-ban-papel .v4-ban-txt .v4-ban-ano { color: #8a5a1e; font-family: Georgia, serif; font-style: italic; }
.v4-ban-papel b { font-family: Georgia, serif; font-size: 22px; }
@media (max-width: 760px) { .v4-ban { grid-template-columns: 1fr; padding: var(--s-4); } .v4-ban-txt .v4-ban-ano { font-size: 34px; } }
.v4-3d-palco canvas { position: absolute; inset: 0; width: 100% !important; height: 100% !important; touch-action: none; display: block; }
.v4-3d-palco .v4-hs { z-index: 2; }

/* ===================== KIT v4.1 · blocos novos e correções =====================
   Montado por montar_kit.py depois de _ava-base.css + extras das disciplinas + _v4.css do piloto.
   Regra: nada de gradiente decorativo; cor chapada da marca. */

/* ---------- Correções dos defeitos encontrados nos pilotos (05/11/2026) ---------- */
/* 1. tabela que vira cartão no celular: a largura mínima do .dados table jogava os valores para fora */
@media (max-width: 640px) {
  .dados table.v4-tc { min-width: 0 !important; }
  .v4-tc td { flex-wrap: wrap; text-align: right; min-width: 0; }
  .v4-tc td::before { flex: 0 1 50%; min-width: 0; }
  .v4-tc td > *, .v4-tc td { overflow-wrap: anywhere; }
}
/* 2. fórmula longa: rola dentro da própria caixa, nunca estoura a página */
.formula, .formula-expr { max-width: 100%; }
.formula-expr { overflow-x: auto; overflow-y: hidden; scrollbar-width: thin; -webkit-overflow-scrolling: touch; }
@media (max-width: 640px) { .formula-expr { font-size: clamp(15px, 4.4vw, 19px); } }
/* 3. rótulos sobre a imagem da abertura: no celular saem da imagem e viram legenda numerada */
@media (max-width: 640px) { .v4-et { display: none !important; } .k4-leg-cel { display: block !important; } }
.k4-leg-cel { display: none; font-size: var(--fs-sm); color: var(--text-mute); margin: 6px 0 0; }
/* 4. linha do tempo: no celular fica vertical, sem corte lateral */
@media (max-width: 640px) {
  .v4-linha { flex-direction: column; overflow: visible; gap: 2px; }
  .v4-linha li { flex: none; padding: 0 0 10px 30px; }
  .v4-linha li::before { left: 7px; right: auto; top: 0; bottom: 0; width: 3px; height: auto; }
  .v4-linha li::after { left: 1px; top: 2px; }
}
/* 6. blocos "Aprofunde" e textos sem espaço não passam da largura */
.v4-spoiler, details, .instrumento-bloco, .exemplo, .case, .k4-os, .k4-doc { overflow-wrap: anywhere; min-width: 0; }
/* figuras: o texto do SVG não pode ser cortado pela borda */
.graf svg, .v4-svg { overflow: visible; }

/* ---------- Ordem de serviço (missão da aula) ---------- */
.k4-os { margin: var(--s-6) 0; background: #fff; border: 2px solid var(--purple-deep); border-radius: var(--r-lg); box-shadow: var(--shadow-md); overflow: hidden; }
.k4-os-cab { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px; background: var(--purple-deep); color: #fff; padding: 12px 18px; }
.k4-os-cab .k4-os-tit { font-weight: 800; letter-spacing: .08em; text-transform: uppercase; font-size: 13px; }
.k4-os-cab .k4-os-num { font-family: 'JetBrains Mono', monospace; font-weight: 700; font-size: 14px; background: rgba(255,255,255,.14); padding: 3px 10px; border-radius: 6px; }
.k4-os-corpo { padding: var(--s-5); }
.k4-os-grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0; margin: 0 0 var(--s-4); border: 1px solid var(--border); border-radius: var(--r-md); overflow: hidden; }
.k4-os-grade > div { padding: 8px 12px; border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.k4-os-grade dt { font-size: 11px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--text-mute); }
.k4-os-grade dd { margin: 2px 0 0; font-weight: 700; color: var(--purple-deep); }
.k4-os-grade .k4-urg dd { color: var(--magenta); }
.k4-os-desc { border-left: 4px solid var(--orange); background: var(--orange-soft, #fff4e8); padding: 12px 16px; border-radius: 0 var(--r-md) var(--r-md) 0; margin: 0 0 var(--s-4); }
.k4-os-desc b { display: block; font-size: 12px; letter-spacing: .07em; text-transform: uppercase; color: var(--orange); margin-bottom: 4px; }
.k4-os-desc p { margin: 0; }
.k4-os-etapas { list-style: none; margin: 0 0 var(--s-3); padding: 0; display: grid; gap: 8px; }
.k4-os-etapas li { display: grid; grid-template-columns: 30px 1fr; gap: 10px; align-items: start; }
.k4-os-etapas li > span { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: 13px; background: var(--bg-2); color: var(--purple-deep); border: 2px solid var(--border-strong); }
.k4-os-etapas li.feito > span { background: var(--green); border-color: var(--green); color: #fff; }
.k4-os-etapas li.feito > span::before { content: '✓'; } .k4-os-etapas li.feito > span i { display: none; }
.k4-os-etapas .k4-bar { display: block; height: 4px; background: var(--bg-2); border-radius: 3px; margin-top: 6px; overflow: hidden; }
.k4-os-etapas .k4-bar b { display: block; height: 100%; width: 0; background: var(--purple-mid); transition: width .3s; }
.k4-os-entrega { margin: var(--s-3) 0 0; font-size: var(--fs-sm); color: var(--text-mute); }
.k4-os-entrega b { color: var(--purple-deep); }

/* ---------- Revisão espaçada ---------- */
.k4-revisao { margin: var(--s-6) 0; }
.k4-revisao-tag { font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--purple-mid); margin-bottom: 6px; }
.k4-revisao .checkpoint { margin: var(--s-3) 0; }
.k4-revisao .k4-de { font-size: 12px; color: var(--text-mute); font-weight: 600; display: block; margin-bottom: 2px; }

/* ---------- Case v4: foto de acervo, crédito e fontes ---------- */
.k4-foto { margin: var(--s-4) 0; }
.k4-foto img { display: block; width: auto; max-width: 100%; height: auto; max-height: min(380px, 60vh); margin: 0 auto; border-radius: var(--r-md); background: var(--bg-2); }
.k4-foto figcaption { font-size: 12.5px; color: var(--text-mute); margin-top: 6px; line-height: 1.45; }
.k4-foto figcaption .k4-cred { display: block; font-size: 11.5px; }
.k4-case-fontes { margin: var(--s-3) 0 0; font-size: 12.5px; color: var(--text-mute); }
.k4-case-fontes b { color: var(--purple-deep); }

/* ---------- Fontes da aula ---------- */
.k4-fontes { margin: var(--s-6) 0; padding: var(--s-5); background: var(--bg-2); border-radius: var(--r-lg); border: 1px solid var(--border); }
.k4-fontes h4 { margin: 0 0 var(--s-3); color: var(--purple-deep); }
.k4-fontes ol { margin: 0; padding-left: 20px; font-size: var(--fs-sm); }
.k4-fontes li { margin: 4px 0; overflow-wrap: anywhere; }
.k4-fontes a { color: var(--purple-mid); }

/* ---------- Documento final (laudo, memorial, ficha) ---------- */
.k4-doc { margin: var(--s-6) 0; background: #fff; border: 1px solid var(--border-strong); border-radius: 6px; box-shadow: var(--shadow-md); }
.k4-doc-folha { padding: var(--s-6); }
.k4-doc-cab { display: grid; grid-template-columns: 1fr auto; gap: 12px; border-bottom: 3px solid var(--purple-deep); padding-bottom: 12px; margin-bottom: 16px; }
.k4-doc-cab .emp { font-weight: 800; color: var(--purple-deep); font-size: var(--fs-lg); }
.k4-doc-cab .emp small { display: block; font-weight: 600; color: var(--text-mute); font-size: 12px; }
.k4-doc-cab .num { text-align: right; font-family: 'JetBrains Mono', monospace; font-size: 13px; color: var(--text-mute); }
.k4-doc-cab .num b { display: block; color: var(--purple-deep); font-size: 15px; }
.k4-doc h4.k4-doc-tit { margin: 0 0 12px; text-transform: uppercase; letter-spacing: .06em; font-size: var(--fs-base); color: var(--magenta); }
.k4-doc table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); margin: 0 0 14px; }
.k4-doc th, .k4-doc td { border: 1px solid var(--border-strong); padding: 6px 10px; text-align: left; vertical-align: top; }
.k4-doc th { width: 38%; background: var(--bg-2); font-weight: 700; color: var(--purple-deep); }
.k4-doc td.k4-auto { font-family: 'JetBrains Mono', monospace; color: var(--purple-deep); }
.k4-doc td.k4-auto:empty::before { content: 'preencha no laboratório'; color: var(--text-mute); font-family: inherit; font-style: italic; }
.k4-doc input, .k4-doc textarea, .k4-doc select { width: 100%; font: inherit; border: 0; border-bottom: 1px dashed var(--border-strong); background: transparent; padding: 2px 0; color: var(--text); }
.k4-doc textarea { min-height: 70px; resize: vertical; border: 1px dashed var(--border-strong); border-radius: 4px; padding: 6px; }
.k4-doc-ass { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 26px; font-size: 12px; color: var(--text-mute); text-align: center; }
.k4-doc-ass div { border-top: 1px solid var(--text); padding-top: 4px; }
.k4-doc-acoes { display: flex; flex-wrap: wrap; gap: 8px; padding: 12px var(--s-6); border-top: 1px solid var(--border); background: var(--bg-2); }
.k4-doc-acoes small { align-self: center; color: var(--text-mute); }
@media (max-width: 640px) { .k4-doc-folha { padding: var(--s-4); } .k4-doc th { width: 45%; } .k4-doc-cab { grid-template-columns: 1fr; } .k4-doc-cab .num { text-align: left; } }
@media print {
  body.k4-imprime * { visibility: hidden !important; }
  body.k4-imprime .k4-doc, body.k4-imprime .k4-doc * { visibility: visible !important; }
  body.k4-imprime .k4-doc { position: absolute; left: 0; top: 0; width: 100%; box-shadow: none; border: 0; }
  body.k4-imprime .k4-doc-acoes { display: none !important; }
  body.k4-imprime .k4-doc input, body.k4-imprime .k4-doc textarea { border: 0; }
}

/* ---------- Peça 3D genérica (model-viewer dentro do kit) ---------- */
.k4-3d model-viewer { width: 100%; height: 100%; background: transparent; --poster-color: transparent; }
.k4-3d .v4-3d-palco { position: relative; }
.k4-3d-erro { padding: 18px; color: var(--text-mute); }

/* ---------- Botões comuns ---------- */
.k4-btn { font: inherit; font-weight: 700; font-size: var(--fs-sm); padding: 9px 16px; border-radius: 999px; border: 1px solid var(--border-strong); background: #fff; color: var(--purple-deep); cursor: pointer; }
.k4-btn.prim { background: var(--purple-deep); border-color: var(--purple-deep); color: #fff; }
.k4-btn:hover { border-color: var(--magenta); }
.k4-btn:focus-visible { outline: 3px solid var(--yellow); outline-offset: 2px; }

/* ---------- Feedback por alternativa ---------- */
.quiz-fb .k4-porque, .ck-fb .k4-porque { display: block; margin-top: 4px; }

/* ---------- Abertura v4: texto na largura toda, render embaixo ---------- */
.k4-hero-txt { max-width: 860px; }
.k4-hero-txt h1 { font-size: clamp(30px, 4.6vw, 54px); }
.v4-hero .v4-hero-3d { margin-top: var(--s-5); }