/* Componentes didáticos: diagramas SVG, áudio e figuras presentes nas páginas. */
.speak-btn{height:29px;padding:0 11px;border:1px solid #D7192050;border-radius:7px;background:#D7192010;color:#B5121B;font:600 10px var(--mono);letter-spacing:.03em;cursor:pointer;white-space:nowrap}.speak-btn:hover{background:#D719201f}
.visual-lab{margin:22px 0 15px;padding:18px 19px 14px;background:linear-gradient(145deg,#F4F4F4,#F8F8F8);border:1px solid #DADADA;border-radius:15px;box-shadow:0 8px 22px #1717170a}.visual-head{display:flex;align-items:center;justify-content:space-between;gap:12px}.visual-head span{color:#D71920;font:500 9px var(--mono);letter-spacing:.15em}.visual-head h3{margin:4px 0 0;color:#171717;font:600 22px/1.05 var(--display);text-transform:uppercase}.visual-run{border:1px solid #BDBDBD;border-radius:8px;background:#FFFFFF;color:#D71920;padding:8px 10px;font:600 10px var(--mono);cursor:pointer;white-space:nowrap}.visual-run:hover{background:#F3F3F3}.visual-frame{margin-top:12px;overflow:hidden;border:1px solid #DADADA;border-radius:11px;background:#FFFFFF;padding:10px}.visual-frame svg{display:block;width:100%;height:auto;max-height:330px}.visual-lab p{margin:10px 2px 0;color:#454545;font:13px/1.5 var(--body)}
.visual-frame .node{fill:#F2F2F2;stroke:#D71920;stroke-width:2}.visual-frame .node.alt{fill:#F2F2F2;stroke:#A61018}.visual-frame .label{fill:#171717;font:700 15px Barlow,Arial,sans-serif;letter-spacing:.05em}.visual-frame .sub{fill:#454545;font:12px Barlow,Arial,sans-serif}.visual-frame .tag{fill:#D71920;font:700 11px JetBrains,monospace;letter-spacing:.04em}.visual-frame .flow-path,.visual-frame .taxi-route,.visual-frame .safe-route,.visual-frame .approach,.visual-frame .actual,.visual-frame .goaround{fill:none;stroke:#D71920;stroke-width:4;stroke-linecap:round;stroke-linejoin:round}.visual-frame .return{stroke:#A61018}.visual-frame .field{fill:#F2F2F2}.visual-frame .runway{fill:#555555}.visual-frame .centerline{fill:none;stroke:#FFFFFF;stroke-width:3;stroke-dasharray:12 11}.visual-frame .taxiway{fill:none;stroke:#A5A5A5;stroke-width:34;stroke-linecap:round;stroke-linejoin:round}.visual-frame .taxi-route{stroke:#D71920;stroke-width:5;stroke-dasharray:9 10}.visual-frame .hold{stroke:#A61018;stroke-width:4}.visual-frame .plane{fill:#171717}.visual-frame .point{fill:#A61018;stroke:#FFFFFF;stroke-width:3}.visual-frame .danger-zone{fill:#A6101838;stroke:#A61018;stroke-width:2}.visual-frame .storm path:first-child{fill:#555555}.visual-frame .storm .bolt{fill:#A61018}.visual-frame .gridline,.visual-frame .chart-grid{stroke:#DADADA;stroke-width:1}.visual-frame .route-line,.visual-frame .cleared,.visual-frame .glide{fill:none;stroke:#707070;stroke-width:2;stroke-dasharray:7 7}.visual-frame .stable-zone{fill:#D7192030;stroke:#D71920;stroke-width:2}.visual-frame .ground{stroke:#454545;stroke-width:3}.visual-frame .gate{fill:#A6101838;stroke:#A61018;stroke-width:3}
.visual-lab.is-running .flow-path,.visual-lab.is-running .taxi-route,.visual-lab.is-running .safe-route,.visual-lab.is-running .approach,.visual-lab.is-running .actual,.visual-lab.is-running .goaround{stroke-dasharray:12 9;animation:routeFlow 1.7s linear infinite}.visual-lab.is-running .plane-moving{animation:planeTravel 4s ease-in-out infinite alternate}.visual-lab.is-running .pulse{animation:warningPulse 1.2s ease-in-out infinite alternate}.visual-lab.is-running .storm{animation:stormBreathe 2.5s ease-in-out infinite alternate}
@keyframes routeFlow{to{stroke-dashoffset:-42}}@keyframes planeTravel{to{transform:translate(390px,150px)}}@keyframes warningPulse{to{opacity:.28;transform:scale(1.16);transform-origin:center}}@keyframes stormBreathe{to{opacity:.65;transform:translateY(-3px)}}
.page-art{margin:12px 0;border:1px solid #DADADA;border-radius:12px;background:#FFFFFF;overflow:hidden}.page-art summary{padding:12px 15px;color:#D71920;font:600 11px var(--display);letter-spacing:.08em;cursor:pointer}.page-art[open] summary{border-bottom:1px solid #DADADA}.page-art img{display:block;width:100%;height:auto;background:#FFFFFF}
@media(max-width:650px){.visual-lab{padding:14px 12px}.visual-head h3{font-size:19px}.visual-run{font-size:9px;padding:8px}.visual-frame{padding:4px}.visual-frame .label{font-size:13px}.speak-btn{font-size:9px;padding:0 7px}}
@media(prefers-reduced-motion:reduce){.visual-lab.is-running *{animation:none!important}}