/* Portfolio page — standalone layout linked from portfolio.php after css/geral.css. */

html, body { overflow-x: hidden; overflow-y: auto; height: auto; }
body { padding: 40px 20px; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; min-height: 100vh; background: #383431; }
.page-card { max-width: 1060px; width: 100%; text-align: left; }
.page-card h1 { font-size: 2rem; margin-bottom: 8px; color: #fff; text-align: center; }
.page-card .intro-subtitle { text-align: center; color: #aaa; margin-bottom: 32px; font-size: 1rem; }
.portfolio-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 20px; }
.project { background: rgba(255,255,255,0.05); border-radius: 12px; padding: 0; border: 1px solid rgba(255,255,255,0.08); backdrop-filter: blur(8px); overflow: hidden; display: flex; flex-direction: column; }
.project img { width: 100%; height: auto; display: block; aspect-ratio: 4 / 3; object-fit: cover; }
.project-body { padding: 20px 24px 24px; flex-grow: 1; display: flex; flex-direction: column; }
.project-body h2 { font-size: 1.15rem; margin-bottom: 6px; color: #fff; }
.project-body .tag { display: inline-block; font-size: 0.75rem; color: #93c5fd; background: rgba(37,99,235,0.15); border: 1px solid rgba(59,130,246,0.3); border-radius: 4px; padding: 2px 8px; margin-bottom: 10px; align-self: flex-start; }
.project-body p { line-height: 1.6; color: #aaa; font-size: 0.9rem; margin: 0; }
.back-link { display: inline-flex; align-items: center; min-height: 44px; margin-top: 24px; color: #aaa; text-decoration: none; font-size: 0.9rem; }
.back-link:hover { color: #fff; }
.portfolio-filter-tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-bottom: 32px; }
.filter-tab { background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.15); color: #aaa; padding: 10px 20px; border-radius: 20px; font-size: 0.9rem; cursor: pointer; transition: all 0.2s ease; font-weight: 500; }
.filter-tab:hover { background: rgba(255,255,255,0.12); color: #fff; border-color: rgba(255,255,255,0.3); }
.filter-tab.active { background: #2563eb; color: #fff; border-color: #3b82f6; }
.project.hidden { display: none !important; }