.projects { padding-bottom: 28px; }
.projects .section-heading > p { max-width: 410px; }
.projects-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.app-project { display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--line); border-radius: 12px; background: var(--white); }
.project-overview { display: flex; align-items: center; gap: 16px; padding: 25px 27px; }
.project-icon { width: 56px; height: 56px; border-radius: 13px; flex-shrink: 0; }
.project-category { color: var(--muted); font: 9px/1.5 var(--mono); margin: 0 0 5px; }
.project-overview h3 { font: 500 29px/1.15 var(--display); letter-spacing: -.9px; margin: 0 0 5px; }
.project-platforms { font: 10px/1.5 var(--body); color: var(--muted); margin: 0; }
.project-media { padding: 26px 34px; border-block: 1px solid var(--line); }
.project-media--financas { background: #e1e9f1; }
.project-media--tabarato { background: #dceee4; }
.project-screens { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 17px; max-width: 330px; margin-inline: auto; }
.project-screens img { width: 100%; height: auto; display: block; border: 1px solid #ffffff50; border-radius: 8px; box-shadow: 0 10px 21px #122c4820; }
.project-copy { display: flex; flex-direction: column; flex: 1; padding: 25px 27px 27px; }
.project-copy > p { font-size: 13px; line-height: 1.9; color: var(--muted); margin: 0 0 18px; }
.project-features { display: flex; gap: 7px; flex-wrap: wrap; padding: 0; margin: 0 0 26px; list-style: none; }
.project-features li { font: 9px/1.5 var(--mono); color: var(--ink); border: 1px solid var(--line); padding: 5px 8px; border-radius: 4px; }
.project-links { display: flex; align-items: center; gap: 24px; margin-top: auto; flex-wrap: wrap; }
.project-links a { display: inline-flex; align-items: center; gap: 13px; font-size: 12px; font-weight: 750; padding-block: 5px; }
.project-links a span { color: var(--blue); font-size: 19px; }
.project-links a:hover { color: var(--blue); }
.teaching { padding-bottom: 28px; }
.teaching .section-heading > p { max-width: 420px; }
.teaching-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.teaching-project { display: flex; flex-direction: column; min-width: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 12px; background: var(--white); }
.teaching-visual { padding: 20px 18px; border-bottom: 1px solid var(--line); background: var(--paper); color: var(--blue); }
.teaching-visual svg { display: block; width: 100%; height: 160px; }
.diagram-lines { stroke: var(--blue); stroke-width: 1.5; }
.diagram-nodes { fill: var(--white); stroke: var(--line); }
.diagram-nodes .diagram-filled { fill: var(--paper); stroke: var(--blue); }
.diagram-text { fill: var(--ink); font: 12px var(--mono); }
.diagram-grid { stroke: var(--line); stroke-dasharray: 3 4; }
.diagram-signal { stroke: var(--blue); stroke-width: 2.5; stroke-linejoin: round; }
.teaching-copy { display: flex; flex: 1; flex-direction: column; padding: 25px 23px; }
.teaching-copy h3 { font-size: 26px; line-height: 1.2; letter-spacing: -.8px; margin: 5px 0 17px; }
.teaching-copy > p:not(.project-category) { font-size: 13px; line-height: 1.9; color: var(--muted); margin-bottom: 20px; }
.teaching-copy .project-features { margin-top: auto; }
.teaching-copy .project-links { margin-top: 0; gap: 20px; }
@media(min-width: 801px) { .teaching-copy h3 { min-height: 63px; } }
@media(max-width: 1100px) { .teaching-grid { gap: 16px; } .teaching-copy { padding: 22px 18px; } .teaching-copy h3 { font-size: 24px; } .teaching-copy .project-links { gap: 14px; } .teaching-copy .project-links a { gap: 7px; } }
@media(max-width: 800px) { .teaching-grid { grid-template-columns: 1fr; gap: 25px; } .teaching { padding-bottom: 12px; } .teaching-copy { padding: 24px; } .teaching-visual svg { max-width: 340px; margin-inline: auto; } .teaching-copy .project-links { gap: 24px; } }
html[data-theme="dark"] .project-media--financas { background: #172b42; }
html[data-theme="dark"] .project-media--tabarato { background: #17392f; }
@media(max-width: 1100px) { .project-overview, .project-copy { padding-inline: 23px; } .project-media { padding-inline: 25px; } }
@media(max-width: 800px) { .projects-grid { grid-template-columns: 1fr; gap: 25px; } .projects h2 { font-size: 37px; } .projects { padding-bottom: 12px; } .project-overview, .project-copy { padding: 22px; } .project-media { padding: 24px; } }
@media(max-width: 390px) { .project-overview { gap: 13px; } .project-overview h3 { font-size: 26px; } .project-icon { width: 50px; height: 50px; } .project-screens { gap: 13px; } .project-links { gap: 21px; } }