.showcase-hero { background:var(--ink); color:var(--on-dark); }
.showcase-hero__inner { max-width:var(--max); margin:auto; padding:80px var(--gutter) 90px; display:grid; grid-template-columns:minmax(0,1fr) 290px; gap:90px; align-items:center; }
.showcase-eyebrow { display:inline-block; font:11px/1.6 var(--mono); text-transform:uppercase; letter-spacing:1.4px; color:var(--accent); margin-bottom:30px; }
.showcase-title { font:500 clamp(52px,6.8vw,94px)/1.04 var(--display); letter-spacing:-3px; }
.showcase-title span { display:block; }
.showcase-title span:last-child { color:var(--accent); }
.showcase-intro { max-width:640px; color:var(--on-dark-2); font-size:18px; line-height:1.7; margin:30px 0; }
.showcase-note { border-left:1px solid var(--line-dark-2); padding:10px 0 10px 34px; }
.showcase-note__label { font:10px/1.6 var(--mono); letter-spacing:1.2px; color:var(--on-dark-2); }
.showcase-count { font:500 112px/1.15 var(--display); letter-spacing:-5px; margin:14px 0 5px; }
.showcase-note > p:nth-of-type(3) { font-size:15px; color:var(--on-dark-2); }
.showcase-fields { display:grid; gap:12px; margin-top:35px; font:11px/1.5 var(--mono); }
.showcase-fields span { border-top:1px solid var(--line-dark); padding-top:10px; }
.showcase-index { max-width:var(--max); margin:auto; padding:64px var(--gutter) 80px; }
.showcase-section-head { display:flex; align-items:baseline; justify-content:space-between; gap:30px; }
.showcase-section-head h2 { font:500 36px/1.2 var(--display); letter-spacing:-1px; }
.showcase-section-head p { font-size:14px; color:var(--text-2); max-width:430px; }
.showcase-controls { display:flex; align-items:end; justify-content:space-between; gap:26px; margin-top:35px; }
.showcase-filters { display:flex; flex-wrap:wrap; gap:7px; }
.showcase-filters button { border:1px solid var(--line); background:transparent; color:var(--text-2); font:11px/1.5 var(--mono); padding:10px 12px; cursor:pointer; transition:background 150ms,color 150ms; }
.showcase-filters button[aria-pressed=true] { color:var(--canvas); background:var(--ink); border-color:var(--ink); }
.showcase-filters button:hover { border-color:var(--ink); }
.showcase-search { display:grid; gap:5px; width:240px; flex-shrink:0; font:10px/1.5 var(--mono); color:var(--text-2); }
.showcase-search input { color:var(--text); background:transparent; border:0; border-bottom:1px solid var(--text-2); border-radius:0; padding:8px 0; width:100%; font:12px/1.5 var(--mono); }
.showcase-results { font:10px/1.5 var(--mono); color:var(--text-2); margin:26px 0 18px; }
.work-project { display:grid; grid-template-columns:340px minmax(0,1fr); gap:42px; border-top:1px solid var(--line); padding:38px 0; scroll-margin-top:95px; }
.work-project__visual { display:flex; align-items:center; justify-content:center; background:var(--canvas-2); height:212px; border:1px solid var(--line-soft); overflow:hidden; }
.work-project__visual img { width:100%; height:100%; object-fit:contain; }
#motora .work-project__visual img, #realay .work-project__visual img, #gestsol .work-project__visual img, #formularios .work-project__visual img, #expediente .work-project__visual img { padding:28px; }
#boell .work-project__visual { background:#fff; }
#food .work-project__visual img { object-fit:cover; object-position:top; }
.project-topline { display:flex; flex-wrap:wrap; align-items:center; gap:6px 14px; font:10px/1.5 var(--mono); color:var(--text-2); margin-bottom:12px; }
.project-number { font-weight:700; color:var(--accent-ink); }
.project-live { color:#21624a; border:1px solid #a6c2b4; padding:2px 6px; }
.work-project h2 { font:500 32px/1.2 var(--display); letter-spacing:-.8px; margin-bottom:10px; }
.project-meta { color:var(--text-2); font:11px/1.7 var(--mono); margin-bottom:15px; }
.project-description { font-size:16px; line-height:1.75; max-width:760px; }
.project-stack { display:flex; flex-wrap:wrap; gap:6px 16px; margin-top:18px; color:var(--text-2); font:10px/1.5 var(--mono); }
.project-stack li { border-bottom:1px solid var(--line); padding-bottom:3px; }
.project-link { display:inline-block; margin-top:18px; font-size:12px; font-weight:650; color:var(--accent-ink); border-bottom:1px solid currentColor; padding-bottom:3px; }
#no-results { padding:40px 0; border-top:1px solid var(--line); }
.showcase-cta { background:var(--canvas-2); border-top:1px solid var(--line); }
.showcase-cta > div { max-width:var(--max); margin:auto; padding:70px var(--gutter) 80px; }
.showcase-cta .showcase-eyebrow { color:var(--accent-ink); margin-bottom:20px; }
.showcase-cta h2 { font:500 clamp(36px,4vw,58px)/1.15 var(--display); letter-spacing:-1.5px; }
.showcase-cta p:not(.showcase-eyebrow) { margin-top:20px; color:var(--text-2); max-width:720px; font-size:18px; line-height:1.7; }
.showcase-cta .btn-row { margin-top:28px; }
.showcase-controls[hidden], .work-project[hidden], #no-results[hidden] { display:none!important; }
#project-list { scroll-margin-top:100px; }
@media(max-width:1100px) { .showcase-hero__inner { gap:40px; grid-template-columns:minmax(0,1fr) 245px; } .showcase-title { letter-spacing:-2px; } .showcase-controls { align-items:start; flex-direction:column; } .showcase-search { width:min(100%,360px); } .work-project { grid-template-columns:275px minmax(0,1fr); gap:28px; } .work-project__visual { height:180px; } }
@media(max-width:700px) { .showcase-hero__inner { display:block; padding-top:48px; padding-bottom:45px; } .showcase-eyebrow { font-size:9px; margin-bottom:23px; } .showcase-title { font-size:clamp(40px,10vw,66px); letter-spacing:-1.6px; } .showcase-intro { font-size:16px; margin-top:23px; } .showcase-note { border-left:0; border-top:1px solid var(--line-dark-2); padding:25px 0 0; margin-top:38px; display:grid; grid-template-columns:100px 1fr; gap:8px 22px; } .showcase-note__label { grid-column:1/-1; } .showcase-count { grid-row:2/4; margin:0; font-size:76px; } .showcase-note > p:nth-of-type(3) { margin-top:10px; } .showcase-fields { margin:0; gap:6px; font-size:9px; } .showcase-fields span { padding-top:5px; } .showcase-index { padding-top:40px; padding-bottom:40px; } .showcase-section-head { display:block; } .showcase-section-head h2 { font-size:31px; } .showcase-section-head p { margin-top:12px; } .showcase-filters button { font-size:10px; padding:9px; } .showcase-controls { margin-top:25px; } .work-project { display:block; padding:27px 0; } .work-project__visual { height:auto; aspect-ratio:1.6; margin-bottom:24px; } .work-project h2 { font-size:29px; } .project-topline { font-size:9px; gap:6px 12px; } .showcase-cta > div { padding-block:45px; } }
@media(prefers-reduced-motion:reduce) { .showcase-filters button { transition:none; } }
@media print { .topbar,.foot,.showcase-controls,.showcase-cta { display:none; } .showcase-hero { color:var(--text); background:white; } .showcase-intro { color:var(--text-2); } .showcase-note { display:none; } .showcase-hero__inner { display:block; padding-block:20px; } .work-project { break-inside:avoid; } }