/* =====================================================================================================
   The teacher's world: THE BOARD. More technical, more precise: grid paper, a framed board, pen blue. The product is
   shown pinned on a board, never in a fake browser window. Same bones as the student world (sistema.css).
   ===================================================================================================== */
.mundo-professor { background: linear-gradient(color-mix(in srgb, var(--pauta) 15%, transparent) 1px, transparent 1px) 0 0 / 28px 28px, linear-gradient(90deg, color-mix(in srgb, var(--pauta) 15%, transparent) 1px, transparent 1px) 0 0 / 28px 28px, var(--papel); }
.hero h1 { font-size: clamp(2.3rem, 1.2rem + 3.7vw, 4.3rem); }
.mundo-professor main > section { position: relative; }

/* the product pinned on a board, with a sticky note */
.hero-visual { position: relative; margin: 0; }
.quadro-moldura { margin: 0; background: var(--quadro); border: clamp(8px, 1vw, 12px) solid var(--quadro-moldura); border-radius: 12px; box-shadow: var(--sombra-forte); overflow: hidden; }
.quadro-moldura img { width: 100%; }
.quadro-largo { margin-top: 40px; }
.post-it { position: absolute; left: -16px; bottom: -26px; padding: 14px 18px 18px; background: #ffe680; color: #3b3320; transform: rotate(-4deg); box-shadow: 0 10px 18px -8px rgb(0 0 0 / .35); font-size: 1.55rem; line-height: 1; }
.post-it::before { content: ""; position: absolute; top: -9px; left: 50%; width: 64px; height: 18px; transform: translateX(-50%) rotate(3deg); background: rgb(255 255 255 / .55); }
@media (max-width: 920px) { .post-it { left: 12px; bottom: -20px; } }

/* eight apps, crossed out like a to-do list that is finally done */
.dor { text-align: center; background: var(--papel); border: 1px solid var(--linha); border-radius: 22px; padding: clamp(28px, 4vw, 48px) clamp(18px, 4vw, 48px); }
.dor > p { max-width: 44em; margin: 18px auto 0; color: color-mix(in srgb, var(--tinta) 86%, var(--papel)); font-size: 1.1rem; line-height: 1.7; }
.apps { list-style: none; padding: 0; margin: 30px auto; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; max-width: 760px; }
.apps li { background: var(--folha); border: 1px solid var(--linha); border-radius: 999px; padding: 8px 16px; font-weight: 600; color: var(--suave); text-decoration: line-through; text-decoration-color: var(--margem); text-decoration-thickness: 2px; }
.dor-fecho { font: 500 clamp(1.3rem, 1rem + 1.2vw, 1.85rem)/1.4 var(--titulo); max-width: 30em; margin: 0 auto; }

/* modes + subjects: CSS-only (radio inputs + :checked), no script */
.modos { margin-top: 26px; }
.modos-titulo { font: 800 .8rem var(--texto); letter-spacing: .08em; text-transform: uppercase; color: var(--suave); margin-bottom: 10px; }
.modo-radio, .mat-radio { position: absolute; opacity: 0; width: 1px; height: 1px; }
.modos-opcoes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.modo { display: grid; gap: 4px; align-content: start; padding: 16px 18px; border-radius: 16px; border: 1.5px solid var(--linha-forte); background: var(--folha); cursor: pointer; min-height: 44px; transition: border-color .15s, background .15s, transform .2s; }
.modo:hover { border-color: var(--caneta); transform: translateY(-2px); }
.modo-nivel { color: var(--caneta); letter-spacing: .2em; font-size: .8rem; }
.modo strong { font: 650 1.2rem var(--titulo); }
.modo span:last-child { color: var(--suave); font-size: .94rem; }
.modo-radio:nth-of-type(1):checked ~ .modos-opcoes .modo:nth-child(1), .modo-radio:nth-of-type(2):checked ~ .modos-opcoes .modo:nth-child(2), .modo-radio:nth-of-type(3):checked ~ .modos-opcoes .modo:nth-child(3) { border-color: var(--caneta); background: var(--caneta-claro); box-shadow: 0 0 0 1px var(--caneta); }
.modo-radio:nth-of-type(1):focus-visible ~ .modos-opcoes .modo:nth-child(1), .modo-radio:nth-of-type(2):focus-visible ~ .modos-opcoes .modo:nth-child(2), .modo-radio:nth-of-type(3):focus-visible ~ .modos-opcoes .modo:nth-child(3) { outline: 3px solid var(--caneta); outline-offset: 3px; }
@media (max-width: 760px) { .modos-opcoes { grid-template-columns: 1fr; } }
.materias { position: relative; margin-top: 20px; }
.mat-abas { display: flex; gap: 8px; margin-bottom: 16px; overflow-x: auto; padding: 2px 2px 8px; scrollbar-width: none; }
.mat-abas::-webkit-scrollbar { display: none; }
.mat-aba { flex: none; display: inline-flex; align-items: center; min-height: 44px; padding: 8px 18px; border-radius: 999px; border: 1.5px solid var(--linha-forte); background: var(--folha); font-weight: 700; cursor: pointer; transition: background .15s, border-color .15s; }
.mat-aba:hover { border-color: var(--caneta); }
.mat-painel { display: none; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(18px, 3vw, 36px); align-items: center; background: var(--folha); border: 1px solid var(--linha); border-radius: 22px; padding: clamp(18px, 3vw, 32px); box-shadow: var(--sombra); }
.mat-lousa { margin: 0; position: relative; min-height: 230px; display: grid; place-items: center; padding: 38px 20px 22px; border-radius: 10px; border: 10px solid var(--quadro-moldura); background: var(--quadro); overflow: hidden; }
.mat-lousa figcaption { position: absolute; left: 14px; top: 10px; font-size: .74rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: color-mix(in srgb, var(--quadro-tinta) 55%, transparent); }
.mat-exemplo { font: 700 clamp(1.5rem, .9rem + 2.2vw, 2.6rem)/1.2 var(--mao); color: var(--quadro-tinta); text-align: center; overflow-wrap: break-word; text-wrap: balance; }
.mat-painel h3 { color: var(--suave); font: 800 .8rem var(--texto); letter-spacing: .08em; text-transform: uppercase; }
.mat-ferramentas { list-style: none; padding: 0; margin: 12px 0 0; display: grid; gap: 8px; }
.mat-ferramentas li { display: flex; align-items: center; gap: 10px; font-weight: 600; }
.mat-ferramentas li::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--marca-texto); box-shadow: 0 0 0 3px var(--marca-claro); flex: none; }
.mat-livre { color: var(--caneta-forte); font-style: italic; }
.materias-nota { margin-top: 14px; max-width: 46em; }
@media (max-width: 760px) { .mat-painel { grid-template-columns: 1fr; } }
.mat-radio:nth-of-type(1):checked ~ .mat-paineis .mat-painel:nth-child(1), .mat-radio:nth-of-type(2):checked ~ .mat-paineis .mat-painel:nth-child(2), .mat-radio:nth-of-type(3):checked ~ .mat-paineis .mat-painel:nth-child(3), .mat-radio:nth-of-type(4):checked ~ .mat-paineis .mat-painel:nth-child(4), .mat-radio:nth-of-type(5):checked ~ .mat-paineis .mat-painel:nth-child(5),
.mat-radio:nth-of-type(6):checked ~ .mat-paineis .mat-painel:nth-child(6), .mat-radio:nth-of-type(7):checked ~ .mat-paineis .mat-painel:nth-child(7), .mat-radio:nth-of-type(8):checked ~ .mat-paineis .mat-painel:nth-child(8), .mat-radio:nth-of-type(9):checked ~ .mat-paineis .mat-painel:nth-child(9), .mat-radio:nth-of-type(10):checked ~ .mat-paineis .mat-painel:nth-child(10), .mat-radio:nth-of-type(11):checked ~ .mat-paineis .mat-painel:nth-child(11) { display: grid; }
.mat-radio:nth-of-type(1):checked ~ .mat-rolo .mat-abas .mat-aba:nth-child(1), .mat-radio:nth-of-type(2):checked ~ .mat-rolo .mat-abas .mat-aba:nth-child(2), .mat-radio:nth-of-type(3):checked ~ .mat-rolo .mat-abas .mat-aba:nth-child(3), .mat-radio:nth-of-type(4):checked ~ .mat-rolo .mat-abas .mat-aba:nth-child(4), .mat-radio:nth-of-type(5):checked ~ .mat-rolo .mat-abas .mat-aba:nth-child(5),
.mat-radio:nth-of-type(6):checked ~ .mat-rolo .mat-abas .mat-aba:nth-child(6), .mat-radio:nth-of-type(7):checked ~ .mat-rolo .mat-abas .mat-aba:nth-child(7), .mat-radio:nth-of-type(8):checked ~ .mat-rolo .mat-abas .mat-aba:nth-child(8), .mat-radio:nth-of-type(9):checked ~ .mat-rolo .mat-abas .mat-aba:nth-child(9), .mat-radio:nth-of-type(10):checked ~ .mat-rolo .mat-abas .mat-aba:nth-child(10) { background: var(--caneta); border-color: var(--caneta); color: var(--sobre-caneta); }
.mat-radio:nth-of-type(11):checked ~ .mat-rolo .mat-abas .mat-aba:nth-child(11), .mat-radio:nth-of-type(12):checked ~ .mat-rolo .mat-abas .mat-aba:nth-child(12) { background: var(--caneta); border-color: var(--caneta); color: var(--sobre-caneta); }
/* text ON the pen color: white by day; at night the pen blue is light, so the text goes dark (02/10: white on light
   blue was unreadable). One token, used by every "chosen" state. */
.mat-aba { color: var(--tinta); }
.mat-radio:nth-of-type(1):focus-visible ~ .mat-rolo .mat-abas .mat-aba:nth-child(1), .mat-radio:nth-of-type(2):focus-visible ~ .mat-rolo .mat-abas .mat-aba:nth-child(2), .mat-radio:nth-of-type(3):focus-visible ~ .mat-rolo .mat-abas .mat-aba:nth-child(3), .mat-radio:nth-of-type(4):focus-visible ~ .mat-rolo .mat-abas .mat-aba:nth-child(4), .mat-radio:nth-of-type(5):focus-visible ~ .mat-rolo .mat-abas .mat-aba:nth-child(5),
.mat-radio:nth-of-type(6):focus-visible ~ .mat-rolo .mat-abas .mat-aba:nth-child(6), .mat-radio:nth-of-type(7):focus-visible ~ .mat-rolo .mat-abas .mat-aba:nth-child(7), .mat-radio:nth-of-type(8):focus-visible ~ .mat-rolo .mat-abas .mat-aba:nth-child(8), .mat-radio:nth-of-type(9):focus-visible ~ .mat-rolo .mat-abas .mat-aba:nth-child(9), .mat-radio:nth-of-type(10):focus-visible ~ .mat-rolo .mat-abas .mat-aba:nth-child(10), .mat-radio:nth-of-type(11):focus-visible ~ .mat-rolo .mat-abas .mat-aba:nth-child(11) { outline: 3px solid var(--caneta); outline-offset: 3px; }
.materias-secao:has(#modo-0:checked) .mat-ferramentas li:nth-child(n+3), .materias-secao:has(#modo-1:checked) .mat-ferramentas li:nth-child(n+4) { display: none; }

/* what already works: six tools drawn as little desk objects */
.grade-recursos { list-style: none; padding: 0; margin: 36px 0 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px 26px; }
.recurso { display: grid; gap: 8px; align-content: start; }
.recurso p { color: var(--suave); }
.recurso-ic { width: 56px; height: 56px; border-radius: 16px; background: var(--caneta-claro); display: grid; place-items: center; transition: transform .3s cubic-bezier(.3, 1.4, .5, 1); }
.recurso:hover .recurso-ic { transform: rotate(-6deg) scale(1.08); }
.recurso-ic svg { width: 38px; height: 38px; overflow: visible; }
.recurso-ic .tr { fill: none; stroke: var(--caneta-forte); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 160; stroke-dashoffset: 0; }
.recurso-ic .tr-cor { stroke: var(--margem); }
.recurso-ic .tr-ponto { fill: var(--caneta-forte); } .recurso-ic .tr-cor-fundo { fill: var(--marca-texto); }
/* each icon draws itself once when its card comes into view (site.mjs adds .visto), and again on hover */
.recurso:not(.visto) .tr { stroke-dashoffset: 160; }
.recurso.visto .tr, .recurso:hover .tr { animation: tracar 1.4s cubic-bezier(.4, 0, .2, 1) both; }
.recurso:hover .onda { animation: onda .9s ease-in-out infinite alternate; }
@keyframes tracar { from { stroke-dashoffset: 160; } to { stroke-dashoffset: 0; } }
@keyframes onda { to { opacity: .2; } }
:root[data-versao="simples"] .recurso .tr { stroke-dashoffset: 0; }
/* the subject tabs: never cut off — arrows when there is more, edges that fade, the chosen tab scrolled into view */
.mat-rolo { position: relative; display: flex; align-items: center; gap: 6px; margin-bottom: 16px; }
.mat-rolo .mat-abas { margin-bottom: 0; flex: 1; scroll-behavior: smooth; }
.mat-rolo.tem-esq .mat-abas { mask-image: linear-gradient(90deg, transparent, #000 48px); }
.mat-rolo.tem-dir .mat-abas { mask-image: linear-gradient(90deg, #000 calc(100% - 48px), transparent); }
.mat-rolo.tem-esq.tem-dir .mat-abas { mask-image: linear-gradient(90deg, transparent, #000 48px, #000 calc(100% - 48px), transparent); }
.rolo-seta { flex: none; width: 44px; height: 44px; border-radius: 50%; border: 1.5px solid var(--linha-forte); background: var(--folha); color: var(--tinta); font: 700 1.5rem/1 var(--texto); cursor: pointer; display: grid; place-items: center; box-shadow: var(--sombra); }
.rolo-seta:hover { border-color: var(--caneta); color: var(--caneta-forte); }
.mat-abas.arrastando { cursor: grabbing; scroll-behavior: auto; }
/* what the board shows follows the level: simple → a first step, intermediate → the usual lesson, advanced → the deep end */
.mat-exemplo.nivel-2, .mat-exemplo.nivel-3 { display: none; }
.materias-secao:has(#modo-1:checked) .mat-exemplo.nivel-1, .materias-secao:has(#modo-2:checked) .mat-exemplo.nivel-1 { display: none; }
.materias-secao:has(#modo-1:checked) .mat-exemplo.nivel-2, .materias-secao:has(#modo-2:checked) .mat-exemplo.nivel-3 { display: block; animation: escrever-lousa .8s steps(18, end) both; }
@keyframes escrever-lousa { from { clip-path: inset(-10% 100% -10% 0); } to { clip-path: inset(-10% -2% -10% 0); } }
@media (max-width: 860px) { .grade-recursos { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .grade-recursos { grid-template-columns: 1fr; } }

/* your brand: six colors, each written with your initials */
.marca { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 32px; align-items: center; background: var(--folha); border-radius: 28px; border: 1px solid var(--linha); box-shadow: var(--sombra); margin-top: 20px !important; margin-bottom: 20px !important; }
.marca-cores { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.marca-cor { aspect-ratio: 1; border-radius: 18px; display: grid; place-items: center; color: #fff; font-size: clamp(1.6rem, 1rem + 2vw, 2.6rem); box-shadow: inset 0 0 0 1px rgb(0 0 0 / .06); transition: transform .25s; }
.marca-cor:hover { transform: rotate(-3deg) scale(1.04); }
@media (max-width: 760px) { .marca { grid-template-columns: 1fr; } }

.rota-lista { list-style: none; padding: 0; margin: 28px 0 14px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.rota-item { border-top: 4px solid var(--linha-forte); padding-top: 16px; }
.rota-item strong { font: 650 1.35rem var(--titulo); }
.rota-item p { color: var(--suave); margin-top: 6px; }
.rota-1 { border-color: var(--verde); } .rota-2 { border-color: var(--marca-texto); }
@media (max-width: 760px) { .rota-lista { grid-template-columns: 1fr; } }

.para { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); align-items: center; }
.prova { margin: 0; padding: 26px 30px; border-left: 4px solid var(--marca-texto); background: var(--folha); border-radius: 0 18px 18px 0; font: 500 clamp(1.25rem, 1rem + 1vw, 1.7rem)/1.45 var(--titulo); box-shadow: var(--sombra); }
.foto-mesa { margin: 0; border-radius: 22px; overflow: hidden; box-shadow: var(--sombra-forte); transform: rotate(1.2deg); }
.foto-mesa img { width: 100%; }
@media (max-width: 900px) { .para { grid-template-columns: 1fr; } }

/* ---------- the board of each subject: beside what is written, a chalk drawing that moves (click = play again) ---------- */
.mat-lousa { grid-template-columns: minmax(0, 1fr) minmax(140px, 44%); gap: 10px 18px; cursor: pointer; }
.mat-lousa .mat-exemplo { grid-column: 1; grid-row: 1; }
.lousa-desenho { grid-column: 2; grid-row: 1; width: 100%; height: auto; max-height: 190px; overflow: visible; }
@media (max-width: 640px) { .mat-lousa { grid-template-columns: 1fr; } .lousa-desenho { grid-column: 1; grid-row: 2; max-height: 140px; } }
.mat-lousa:focus-visible { outline: 3px solid var(--lapis); outline-offset: 3px; }
.lousa-desenho .giz, .lousa-desenho .giz-fino { fill: none; stroke: var(--quadro-tinta); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; opacity: .92; }
.lousa-desenho .giz-fino { stroke-width: 1.6; opacity: .55; }
.lousa-desenho .giz-cor { stroke: #f5c542; }
.lousa-desenho .giz-cheio { fill: var(--quadro-tinta); opacity: .9; }
.lousa-desenho .giz-cor-cheio { fill: #f5c542; }
.lousa-desenho .giz-ponto { fill: #ff8a70; }
.lousa-desenho .giz-amarelo { fill: #f5d76e; }
.lousa-desenho .giz-escuro { stroke: #5a4a1a; stroke-width: 2.5; fill: none; stroke-linecap: round; }
.lousa-desenho .giz-liquido { fill: color-mix(in srgb, #6fc3df 70%, transparent); }
.lousa-desenho .giz-letra { font: 700 19px var(--mao); fill: var(--quadro-tinta); }
.lousa-desenho .giz-letra.centro { text-anchor: middle; font-size: 18px; }
.lousa-desenho .giz-letra.pequeno { font-size: 13px; fill: #5a4a1a; }
.lousa-desenho .giz-codigo { font: 600 13px ui-monospace, Consolas, monospace; fill: var(--quadro-tinta); }
.lousa-desenho .giz-cor-texto { fill: #f5c542; }
.lousa-desenho .barra-giz { fill: color-mix(in srgb, var(--quadro-tinta) 80%, transparent); transform-box: fill-box; transform-origin: bottom; }
.lousa-desenho .barra-giz.b6 { fill: #f5c542; }
.lousa-desenho .marco-giz { fill: var(--quadro); stroke: var(--quadro-tinta); stroke-width: 3; }
:root[data-cores="contraste"] .lousa-desenho :is(.giz-cor) { stroke: var(--quadro-tinta); }

/* the motions (only when allowed; the board is still fully drawn otherwise) */
@media (prefers-reduced-motion: no-preference) {
  :root:not([data-versao="simples"]) .lousa-desenho .traco-desenha { stroke-dasharray: 340; animation: giz-traca 2.4s ease-in-out infinite alternate; }
  :root:not([data-versao="simples"]) .lousa-desenho .tique { stroke-dasharray: 30; stroke-dashoffset: 30; animation: giz-tique 6s ease infinite; }
  :root:not([data-versao="simples"]) .lousa-desenho .t1 { animation-delay: .5s; } .lousa-desenho .t2 { animation-delay: 1s; } .lousa-desenho .t3 { animation-delay: 1.5s; } .lousa-desenho .t4 { animation-delay: 2s; } .lousa-desenho .t5 { animation-delay: 2.5s; }
  :root:not([data-versao="simples"]) .lousa-desenho .postit-giz { animation: giz-postit 6s cubic-bezier(.3, 1.4, .5, 1) infinite; transform-origin: 158px 70px; }
  :root:not([data-versao="simples"]) .lousa-desenho .pendulo { transform-origin: 100px 10px; animation: giz-pendulo 2.2s ease-in-out infinite alternate; }
  :root:not([data-versao="simples"]) .lousa-desenho .molecula { transform-origin: 100px 72px; animation: lz-vibra 2.4s ease-in-out infinite alternate; }
  :root:not([data-versao="simples"]) .lousa-desenho .bolha-giz { fill: var(--quadro-tinta); opacity: 0; animation: giz-bolha 2.4s ease-in infinite; }
  :root:not([data-versao="simples"]) .lousa-desenho .b2 { animation-delay: .8s; } .lousa-desenho .b3 { animation-delay: 1.6s; }
  :root:not([data-versao="simples"]) .lousa-desenho .fala-giz { opacity: 0; animation: giz-fala 8s ease infinite; }
  :root:not([data-versao="simples"]) .lousa-desenho .fala-giz.f2 { animation-delay: 1s; } .lousa-desenho .fala-giz.f3 { animation-delay: 4s; } .lousa-desenho .fala-giz.f4 { animation-delay: 5s; }
  :root:not([data-versao="simples"]) .lousa-desenho .nota-giz { animation: giz-nota 2s ease-in-out infinite; transform-box: fill-box; }
  :root:not([data-versao="simples"]) .lousa-desenho .n1 { animation-delay: .25s; } .lousa-desenho .n2 { animation-delay: .5s; } .lousa-desenho .n3 { animation-delay: .75s; } .lousa-desenho .n4 { animation-delay: 1s; }
  :root:not([data-versao="simples"]) .lousa-desenho .c-esq { animation: giz-divide-e 5s ease-in-out infinite; }
  :root:not([data-versao="simples"]) .lousa-desenho .c-dir { animation: giz-divide-d 5s ease-in-out infinite; }
  :root:not([data-versao="simples"]) .lousa-desenho .digita { clip-path: inset(0 100% 0 0); animation: giz-digita 6s steps(16) infinite; }
  :root:not([data-versao="simples"]) .lousa-desenho .d2 { animation-delay: 1.4s; } .lousa-desenho .d3 { animation-delay: 2s; }
  :root:not([data-versao="simples"]) .lousa-desenho .barra-giz { animation: giz-barra 4.5s ease-out infinite; }
  :root:not([data-versao="simples"]) .lousa-desenho .b1 { animation-delay: .15s; } .lousa-desenho .b2 { animation-delay: .3s; } .lousa-desenho .b3 { animation-delay: .45s; } .lousa-desenho .b4 { animation-delay: .6s; } .lousa-desenho .b5 { animation-delay: .75s; } .lousa-desenho .b6 { animation-delay: .9s; }
  :root:not([data-versao="simples"]) .lousa-desenho .moeda-giz { animation: giz-moeda 4.5s ease-in infinite; }
  :root:not([data-versao="simples"]) .lousa-desenho .marco-giz { animation: giz-marco 4s ease infinite; }
  :root:not([data-versao="simples"]) .lousa-desenho .m1 { animation-delay: .7s; } .lousa-desenho .m2 { animation-delay: 1.4s; } .lousa-desenho .m3 { animation-delay: 2.1s; }
  :root:not([data-versao="simples"]) .lousa-desenho .ampulheta-giz { transform-origin: 100px 111px; animation: giz-vira 4s ease-in-out infinite; }
}
@keyframes giz-traca { from { stroke-dashoffset: 340; } to { stroke-dashoffset: 0; } }
@keyframes giz-tique { 0%, 8% { stroke-dashoffset: 30; } 18%, 85% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 30; } }
@keyframes giz-postit { 0%, 40% { transform: translateY(-90px) rotate(-14deg); opacity: 0; } 55%, 90% { transform: rotate(4deg); opacity: 1; } 100% { transform: rotate(4deg); opacity: 0; } }
@keyframes giz-pendulo { from { transform: rotate(-26deg); } to { transform: rotate(26deg); } }
@keyframes giz-gira { to { transform: rotate(360deg); } }
@keyframes giz-bolha { 0% { opacity: 0; transform: translateY(0); } 30% { opacity: .8; } 100% { opacity: 0; transform: translateY(-34px); } }
@keyframes giz-fala { 0% { opacity: 0; transform: scale(.8); } 6%, 40% { opacity: 1; transform: none; } 48%, 100% { opacity: 0; } }
@keyframes giz-nota { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes giz-divide-e { 0%, 25% { transform: none; } 60%, 85% { transform: translateX(-34px) scale(.72); } 100% { transform: none; } }
@keyframes giz-divide-d { 0%, 25% { transform: none; } 60%, 85% { transform: translateX(34px) scale(.72); } 100% { transform: none; } }
@keyframes giz-digita { 0% { clip-path: inset(0 100% 0 0); } 25%, 90% { clip-path: inset(0 0 0 0); } 100% { clip-path: inset(0 100% 0 0); } }
@keyframes giz-barra { 0% { transform: scaleY(0); } 40%, 88% { transform: scaleY(1); } 100% { transform: scaleY(0); } }
@keyframes giz-moeda { 0%, 30% { transform: translateY(-30px); opacity: 0; } 50%, 85% { transform: none; opacity: 1; } 100% { opacity: 0; } }
@keyframes giz-marco { 0%, 15% { fill: var(--quadro); } 25%, 80% { fill: #f5c542; } 100% { fill: var(--quadro); } }
@keyframes giz-vira { 0%, 70% { transform: none; } 90%, 100% { transform: rotate(180deg); } }
/* a click on the board: everything starts over */
.mat-lousa.de-novo .lousa-desenho * { animation: none !important; }

/* ---------- one drawing per level (site-fonte/lousas.mjs), shown with the level, like the written example ---------- */
.lousa-desenho.nivel-2, .lousa-desenho.nivel-3 { display: none; }
.materias-secao:has(#modo-1:checked) .lousa-desenho.nivel-1, .materias-secao:has(#modo-2:checked) .lousa-desenho.nivel-1 { display: none; }
.materias-secao:has(#modo-1:checked) .lousa-desenho.nivel-2, .materias-secao:has(#modo-2:checked) .lousa-desenho.nivel-3 { display: block; }
.lousa-desenho .giz-area { fill: color-mix(in srgb, #f5c542 45%, transparent); }
.lousa-desenho .giz-verde { fill: #5fae6b; }
.lousa-desenho .giz-cheio-azul { fill: #3158c9; }
.lousa-desenho .giz-letra.grande { font-size: 30px; }
.lousa-desenho .giz-letra.escuro { fill: #1d2654; }
.lousa-desenho .dl-1 { animation-delay: 0.1s !important; }
.lousa-desenho .dl-2 { animation-delay: 0.2s !important; }
.lousa-desenho .dl-3 { animation-delay: 0.3s !important; }
.lousa-desenho .dl-4 { animation-delay: 0.4s !important; }
.lousa-desenho .dl-5 { animation-delay: 0.5s !important; }
.lousa-desenho .dl-6 { animation-delay: 0.6s !important; }
.lousa-desenho .dl-7 { animation-delay: 0.7s !important; }
.lousa-desenho .dl-8 { animation-delay: 0.8s !important; }
.lousa-desenho .dl-9 { animation-delay: 0.9s !important; }
.lousa-desenho .dl-10 { animation-delay: 1s !important; }
.lousa-desenho .dl-11 { animation-delay: 1.1s !important; }
.lousa-desenho .dl-12 { animation-delay: 1.2s !important; }
.lousa-desenho .dl-13 { animation-delay: 1.3s !important; }
.lousa-desenho .dl-14 { animation-delay: 1.4s !important; }
.lousa-desenho .dl-15 { animation-delay: 1.5s !important; }
.lousa-desenho .dl-16 { animation-delay: 1.6s !important; }
.lousa-desenho .dl-17 { animation-delay: 1.7s !important; }
.lousa-desenho .dl-18 { animation-delay: 1.8s !important; }
.lousa-desenho .dl-19 { animation-delay: 1.9s !important; }
.lousa-desenho .dl-20 { animation-delay: 2s !important; }
@media (prefers-reduced-motion: no-preference) {
  :root:not([data-versao="simples"]) .lousa-desenho .a-circula { stroke-dasharray: 190; animation: giz-traca 2.6s ease-in-out infinite alternate; }
  :root:not([data-versao="simples"]) .lousa-desenho .a-pisca { animation: lz-pisca 1.6s ease-in-out infinite; }
  :root:not([data-versao="simples"]) .lousa-desenho .a-tique { stroke-dasharray: 30; animation: giz-tique 4s ease infinite; }
  :root:not([data-versao="simples"]) .lousa-desenho .a-barra-x { transform-box: fill-box; transform-origin: left; animation: lz-barra-x 3.5s ease-out infinite; }
  :root:not([data-versao="simples"]) .lousa-desenho .a-traca { stroke-dasharray: 340; animation: giz-traca 2.8s ease-in-out infinite alternate; }
  :root:not([data-versao="simples"]) .lousa-desenho .a-salta { transform-box: fill-box; animation: lz-salta 1.8s ease-in-out infinite; }
  :root:not([data-versao="simples"]) .lousa-desenho .a-anda { animation: lz-anda 4s linear infinite; }
  :root:not([data-versao="simples"]) .lousa-desenho .a-empurra { animation: lz-empurra 3s cubic-bezier(.5, 0, 1, .6) infinite; }
  :root:not([data-versao="simples"]) .lousa-desenho .a-seta { animation: lz-empurra 3s cubic-bezier(.5, 0, 1, .6) infinite; }
  :root:not([data-versao="simples"]) .lousa-desenho .a-raio { stroke-dasharray: 40; animation: lz-raio 1.8s ease-out infinite; }
  :root:not([data-versao="simples"]) .lousa-desenho .a-onda { transform-box: fill-box; transform-origin: center; animation: lz-onda 1.8s ease-out infinite; }
  :root:not([data-versao="simples"]) .lousa-desenho .a-junta-e { animation: lz-junta-e 3.6s ease-in-out infinite; }
  :root:not([data-versao="simples"]) .lousa-desenho .a-junta-d { animation: lz-junta-d 3.6s ease-in-out infinite; }
  :root:not([data-versao="simples"]) .lousa-desenho .a-pistao { animation: lz-pistao 3s ease-in-out infinite alternate; }
  :root:not([data-versao="simples"]) .lousa-desenho .a-gas { transform-box: fill-box; animation: lz-gas 1.1s ease-in-out infinite alternate; }
  :root:not([data-versao="simples"]) .lousa-desenho .a-aviao { offset-path: path("M14 104Q70 40 136 48"); offset-rotate: auto; animation: lz-voo 4.6s ease-in-out infinite; }
  :root:not([data-versao="simples"]) .lousa-desenho .a-reagente { animation: lz-reagente 4.4s ease-in-out infinite; }
  :root:not([data-versao="simples"]) .lousa-desenho .a-produto { transform-box: fill-box; transform-origin: center; animation: lz-produto 4.4s ease-in-out infinite; }
  :root:not([data-versao="simples"]) .lousa-desenho .a-produto.p1 { animation-delay: .25s; }
  :root:not([data-versao="simples"]) .lousa-desenho .a-agulha { transform-origin: 162px 58px; animation: lz-agulha 3s ease-in-out infinite alternate; }
  :root:not([data-versao="simples"]) .lousa-desenho .a-metronomo { transform-origin: 100px 112px; animation: lz-metro .83s ease-in-out infinite alternate; }
  :root:not([data-versao="simples"]) .lousa-desenho .a-acorde { animation: lz-acorde 2.4s ease-in-out infinite; }
  :root:not([data-versao="simples"]) .lousa-desenho .a-bate { transform-box: fill-box; transform-origin: center; animation: lz-bate 1s ease-in-out infinite; }
  :root:not([data-versao="simples"]) .lousa-desenho .a-carga { transform-box: fill-box; transform-origin: left; animation: lz-barra-x 3s ease-in-out infinite alternate; }
  :root:not([data-versao="simples"]) .lousa-desenho .a-aparece { opacity: 0; animation: lz-aparece 2.4s ease infinite; }
  :root:not([data-versao="simples"]) .lousa-desenho .a-some { animation: lz-some 3.2s ease infinite; }
  :root:not([data-versao="simples"]) .lousa-desenho .a-navega { animation: lz-navega 5s ease-in-out infinite alternate; }
  :root:not([data-versao="simples"]) .lousa-desenho .a-hasteia { animation: lz-hasteia 4s ease-out infinite; }
  :root:not([data-versao="simples"]) .lousa-desenho .a-enche { transform-box: fill-box; transform-origin: bottom; animation: lz-enche 3s ease-in-out infinite alternate; }
}
@keyframes lz-pisca { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@keyframes lz-barra-x { 0% { transform: scaleX(.05); } 70%, 100% { transform: scaleX(1); } }
@keyframes lz-salta { 0%, 100% { transform: translateY(0); } 40% { transform: translateY(-14px); } }
@keyframes lz-anda { from { transform: translateX(-20px); } to { transform: translateX(150px); } }
@keyframes lz-empurra { from { transform: translateX(0); } to { transform: translateX(80px); } }
@keyframes lz-raio { 0% { stroke-dashoffset: 40; opacity: 0; } 30% { opacity: 1; } 100% { stroke-dashoffset: -40; opacity: 0; } }
@keyframes lz-onda { from { transform: scale(.4); opacity: 1; } to { transform: scale(2.2); opacity: 0; } }
@keyframes lz-junta-e { 0%, 20% { transform: none; } 60%, 85% { transform: translateX(52px); } 100% { transform: none; } }
@keyframes lz-junta-d { 0%, 20% { transform: none; } 60%, 85% { transform: translateX(-52px); } 100% { transform: none; } }
@keyframes lz-pistao { from { transform: translateY(0); } to { transform: translateY(34px); } }
@keyframes lz-gas { from { transform: translate(0, 0); } to { transform: translate(5px, -6px); } }
@keyframes lz-vibra { from { transform: rotate(-7deg); } to { transform: rotate(7deg); } }
@keyframes lz-voo { 0% { offset-distance: 0%; opacity: 0; } 10% { opacity: 1; } 78% { offset-distance: 100%; opacity: 1; } 92%, 100% { offset-distance: 100%; opacity: 0; } }
@keyframes lz-reagente { 0%, 30% { opacity: 1; transform: none; } 55%, 85% { opacity: .22; transform: translateX(10px); } 100% { opacity: 1; transform: none; } }
@keyframes lz-produto { 0%, 35% { opacity: 0; transform: scale(.4); } 55%, 85% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(.4); } }
@keyframes lz-agulha { from { transform: rotate(-60deg); } to { transform: rotate(60deg); } }
@keyframes lz-aviao { 0% { transform: translate(0, 0) rotate(0); } 50% { transform: translate(70px, -10px) rotate(-6deg); } 100% { transform: translate(0, 0); } }
@keyframes lz-metro { from { transform: rotate(-24deg); } to { transform: rotate(24deg); } }
@keyframes lz-acorde { 0%, 100% { opacity: .35; } 30%, 50% { opacity: 1; } }
@keyframes lz-bate { 0%, 100% { transform: scale(1); } 15% { transform: scale(1.15); } 30% { transform: scale(.97); } }
@keyframes lz-aparece { 0%, 10% { opacity: 0; } 25%, 85% { opacity: 1; } 100% { opacity: 0; } }
@keyframes lz-some { 0%, 30% { opacity: 1; transform: none; } 55%, 90% { opacity: .1; transform: translateY(-10px); } 100% { opacity: 1; } }
@keyframes lz-navega { from { transform: translateX(0) rotate(-2deg); } to { transform: translateX(60px) rotate(2deg); } }
@keyframes lz-hasteia { 0% { transform: translateY(60px); } 60%, 100% { transform: translateY(0); } }
@keyframes lz-enche { from { transform: scaleY(0); } to { transform: scaleY(1); } }

.lousa-desenho .tracinho { stroke-dasharray: 3 5; }
.lousa-desenho .giz-letra.claro { fill: color-mix(in srgb, var(--quadro-tinta) 70%, transparent); }
.lousa-desenho .a-aviao { offset-path: path("M14 104Q70 40 136 48"); offset-distance: 100%; offset-rotate: auto; }
.lousa-desenho .giz-letra.sobre-cheio { fill: var(--quadro); }
.lousa-desenho .a-aviao { scale: 1.7; }

/* why Aulecko exists: a manifesto written on a notebook sheet, four pillars marked with highlighter, a taped polaroid */
.para { align-items: start; }
.manifesto { position: relative; padding: 34px 34px 30px 70px; background: linear-gradient(90deg, transparent 0 48px, var(--margem) 48px 50px, transparent 50px), linear-gradient(transparent calc(100% - 1px), var(--ficha-pauta) calc(100% - 1px)) 0 6px / 100% 34px, var(--papel-ficha); color: var(--caderno-tinta); border-radius: 4px; box-shadow: var(--sombra-papel); rotate: -.6deg; }
.manifesto::before { content: ""; position: absolute; top: -12px; left: 46%; width: 96px; height: 26px; background: var(--fita); rotate: -3deg; }
.manifesto .selo { color: color-mix(in srgb, var(--caderno-tinta) 70%, transparent); text-shadow: none; }
.manifesto-titulo { font-size: clamp(2.1rem, 1.4rem + 2.4vw, 3.2rem); line-height: 1.02; margin: 6px 0 12px; color: var(--caderno-tinta); }
.manifesto-foco { font: 600 clamp(1.08rem, .95rem + .5vw, 1.3rem)/34px var(--titulo); color: var(--caderno-tinta); text-shadow: none; }
.pilares { list-style: none; padding: 0; margin: 14px 0 6px; display: grid; gap: 4px; }
.pilar { display: grid; grid-template-columns: 8.5em minmax(0, 1fr); gap: 12px; align-items: baseline; line-height: 34px; }
.pilar strong { justify-self: start; font-size: 1.7rem; line-height: 1.1; padding: 0 .25em; background: linear-gradient(transparent 38%, color-mix(in srgb, var(--marca-texto) 75%, transparent) 38% 88%, transparent 88%); rotate: -1.5deg; }
.pilar.p2 strong { background: linear-gradient(transparent 38%, rgb(140 200 255 / .7) 38% 88%, transparent 88%); rotate: 1deg; }
.pilar.p3 strong { background: linear-gradient(transparent 38%, rgb(255 160 190 / .7) 38% 88%, transparent 88%); }
.pilar.p4 strong { background: linear-gradient(transparent 38%, rgb(150 220 160 / .7) 38% 88%, transparent 88%); rotate: 1.5deg; }
.pilar span { color: color-mix(in srgb, var(--caderno-tinta) 85%, transparent); }
.manifesto-origem { margin-top: 10px; line-height: 34px; color: color-mix(in srgb, var(--caderno-tinta) 80%, transparent); text-shadow: none; }
.manifesto-assina { text-align: right; font-size: 1.45rem; color: #2544a8; margin-top: 4px; }
.polaroide { background: #fffdf6; padding: 14px 14px 52px; border-radius: 3px; overflow: visible; transform: rotate(2.4deg); box-shadow: var(--sombra-papel); position: relative; margin-top: 28px; }
.polaroide::before { content: ""; position: absolute; top: -14px; left: 50%; width: 110px; height: 28px; translate: -50% 0; background: var(--fita-azul); rotate: 4deg; }
.polaroide img { border-radius: 2px; }
.polaroide figcaption { position: absolute; left: 0; right: 0; bottom: 12px; text-align: center; font-size: 1.5rem; color: #2c2c31; }
@media (max-width: 560px) { .manifesto { padding: 28px 18px 24px 56px; } .pilar { grid-template-columns: 1fr; gap: 0; } }