/* Shared styles for portfolio.html and calculadora.html */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  --ink: #151514; --paper: #f4f1ea; --hero-bg: #0f0e0d;
  --accent: #ef7a2a;
  --sans: 'Space Grotesk', system-ui, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, monospace;
  --ease: cubic-bezier(0.22,1,0.36,1);
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { font-family: var(--sans); background: var(--paper); color: var(--ink); overflow-x: hidden; }

/* NAV — identical to main */
nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; display: flex; align-items: center; justify-content: space-between; padding: 0 48px; height: 64px; background: rgba(15,14,13,0.92); backdrop-filter: blur(14px); border-bottom: 1px solid rgba(255,255,255,0.06); }
.nav-logo { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.nav-wordmark { font-weight: 600; font-size: 18px; letter-spacing: -0.03em; color: var(--paper); }
.nav-wordmark span { font-weight: 400; opacity: 0.45; }
.nav-links { display: flex; align-items: center; gap: 32px; }
.nav-links a { color: rgba(244,241,234,0.65); text-decoration: none; font-size: 14px; font-weight: 500; transition: color 0.2s; }
.nav-links a:hover, .nav-links a.active { color: var(--paper); }
.nav-links a.active { color: var(--accent); }
.btn-primary { padding: 14px 28px; background: var(--accent); color: var(--ink); font-family: var(--sans); font-weight: 600; font-size: 15px; border: none; cursor: pointer; text-decoration: none; transition: opacity 0.2s; display: inline-block; }
.btn-primary:hover { opacity: 0.88; }

/* FOOTER */
footer { background: var(--ink); color: var(--paper); padding: 44px 48px; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 20px; }
.foot-copy { font-family: var(--mono); font-size: 11px; opacity: 0.4; letter-spacing: 0.05em; }
.foot-links { display: flex; gap: 24px; }
.foot-links a { font-family: var(--mono); font-size: 11px; color: rgba(244,241,234,0.45); text-decoration: none; letter-spacing: 0.05em; transition: color 0.2s; }
.foot-links a:hover { color: var(--paper); }

/* SCROLL PROGRESS */
#scroll-progress { position: fixed; top: 0; left: 0; z-index: 10000; height: 3px; width: 0; background: var(--accent); pointer-events: none; }

/* PORTFOLIO */
.pf-hero { padding: 120px 48px 60px; background: var(--ink); }
.pf-hero .s-label { font-family: var(--mono); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--accent); margin-bottom: 16px; }
.pf-hero h1 { font-size: clamp(28px,4vw,52px); font-weight: 600; letter-spacing: -0.035em; line-height: 1; color: var(--paper); margin-bottom: 16px; }
.pf-hero h1 em { font-style: normal; color: var(--accent); }
.pf-hero p { font-size: 17px; line-height: 1.6; color: rgba(244,241,234,0.55); max-width: 560px; }

.pf-filters { padding: 20px 48px; background: #fff; border-bottom: 1px solid rgba(0,0,0,0.08); display: flex; gap: 8px; align-items: center; flex-wrap: wrap; position: sticky; top: 64px; z-index: 50; }
.pf-filters-label { font-family: var(--mono); font-size: 10px; color: #999; letter-spacing: 0.1em; margin-right: 4px; }
.filter-btn { padding: 6px 14px; border: 1px solid #ddd; background: none; color: #666; font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em; cursor: pointer; transition: all 0.15s; }
.filter-btn:hover { border-color: var(--accent); color: var(--ink); }
.filter-btn.active { background: var(--accent); border-color: var(--accent); color: var(--ink); font-weight: 600; }

.pf-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 2px; padding: 2px; background: #e8e5de; }
.pf-card { background: #fff; overflow: hidden; cursor: pointer; }
.pf-card[hidden] { display: none; }
.pf-img-wrap { position: relative; height: 240px; overflow: hidden; }
.pf-img-wrap img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s var(--ease); filter: grayscale(12%) contrast(1.04); }
.pf-card:hover .pf-img-wrap img { transform: scale(1.04); filter: grayscale(0%) contrast(1.06); }
.pf-overlay { position: absolute; inset: 0; background: rgba(239,122,42,0.88); display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.25s; }
.pf-card:hover .pf-overlay { opacity: 1; }
.pf-overlay span { font-family: var(--mono); font-size: 11px; font-weight: 600; color: var(--ink); letter-spacing: 0.1em; }
.pf-info { padding: 20px; }
.pf-cat { font-family: var(--mono); font-size: 9px; color: var(--accent); letter-spacing: 0.12em; margin-bottom: 6px; }
.pf-name { font-size: 14px; font-weight: 600; color: var(--ink); margin-bottom: 4px; }
.pf-meta { font-size: 11px; color: #888; }

/* LIGHTBOX */
#lightbox { position: fixed; inset: 0; z-index: 9000; background: rgba(15,14,13,0.95); display: flex; align-items: center; justify-content: center; opacity: 0; pointer-events: none; transition: opacity 0.3s; }
#lightbox.open { opacity: 1; pointer-events: auto; }
.lb-inner { display: flex; gap: 48px; max-width: 1000px; width: 90%; align-items: center; }
.lb-img { flex: 1; max-width: 560px; }
.lb-img img { width: 100%; max-height: 80vh; object-fit: contain; }
.lb-details { width: 280px; color: var(--paper); }
.lb-cat { font-family: var(--mono); font-size: 9px; color: var(--accent); letter-spacing: 0.15em; margin-bottom: 12px; }
.lb-title { font-size: 22px; font-weight: 600; letter-spacing: -0.02em; margin-bottom: 8px; }
.lb-desc { font-size: 14px; line-height: 1.6; color: rgba(244,241,234,0.6); margin-bottom: 20px; }
.lb-specs { border-top: 1px solid rgba(255,255,255,0.08); padding-top: 16px; display: grid; gap: 12px; }
.lb-spec-key { font-family: var(--mono); font-size: 9px; letter-spacing: 0.1em; color: rgba(244,241,234,0.4); }
.lb-spec-val { font-size: 14px; font-weight: 500; color: var(--paper); margin-top: 2px; }
.lb-close { position: absolute; top: 24px; right: 32px; background: none; border: none; color: var(--paper); font-size: 28px; cursor: pointer; opacity: 0.6; transition: opacity 0.2s; }
.lb-close:hover { opacity: 1; }
.lb-cta { margin-top: 24px; }

.pf-cta { background: var(--ink); padding: 60px 48px; text-align: center; }
.pf-cta h2 { font-size: 28px; font-weight: 600; color: var(--paper); letter-spacing: -0.03em; margin-bottom: 8px; }
.pf-cta p { font-size: 15px; color: rgba(244,241,234,0.5); margin-bottom: 24px; }

@media (max-width: 860px) {
  nav { padding: 0 20px; }
  .nav-links { display: none; }
  .pf-hero, .pf-filters, .pf-cta { padding-left: 24px; padding-right: 24px; }
  .pf-grid { grid-template-columns: 1fr 1fr; }
  .lb-inner { flex-direction: column; }
  .lb-details { width: 100%; }
}
@media (max-width: 540px) { .pf-grid { grid-template-columns: 1fr; } }