/* Actual website captures inside lightweight device frames. */
#proyectos .web-mockup{color:#20202a;background:radial-gradient(ellipse at 50% 36%,#ffffffb5,transparent 65%),var(--brand-bg);aspect-ratio:1.15}
.web-mockup:before{content:"";position:absolute;width:78%;height:65%;border:1px solid #ffffff8c;border-radius:50%;left:28%;top:2%;transform:rotate(-25deg)}
.web-mockup .brand-banner-top{inset:18px 20px auto}
.web-mockup .brand-category{font-size:8px;letter-spacing:.09em}
.mock-stage{position:absolute;inset:19% 0 22%;display:grid;place-items:center;perspective:900px}
.mock-laptop{display:block;position:relative;width:82%;transform:rotate(-4deg) rotateY(-8deg);transition:transform .45s ease;filter:drop-shadow(0 20px 13px #23252e35)}
.mock-screen{display:block;background:#191b22;border:5px solid #24262d;border-top-width:8px;border-radius:8px 8px 3px 3px;aspect-ratio:16/9;overflow:hidden;box-shadow:0 0 0 1px #9699a3}
.mock-screen img{display:block;width:100%;height:100%;object-fit:cover;object-position:top}
.mock-base{display:block;position:relative;height:8px;width:113%;margin-left:-6.5%;border-radius:1px 1px 50% 50%/1px 1px 100% 100%;background:linear-gradient(#e4e6ed,#9a9ea9 55%,#535863);box-shadow:0 3px 0 #515761}
.mock-base:before{content:"";position:absolute;top:0;left:40%;width:20%;height:3px;border-radius:0 0 6px 6px;background:#9095a0}
.mock-caption{position:absolute;left:22px;right:22px;bottom:22px}
.mock-caption h3{font:700 clamp(19px,1.55vw,25px)/1.15 var(--sans);letter-spacing:-.035em;margin:0 0 8px}
.mock-caption>span{font:10px var(--mono);opacity:.65}
.web-mockup:nth-child(3n+2) .mock-laptop{transform:rotate(4deg) rotateY(8deg)}
.web-mockup:hover .mock-laptop{transform:rotate(0) rotateY(0) translateY(-5px)}
.mock-phone{position:absolute;width:20%;height:88%;right:7%;bottom:-3%;padding:4px;background:#202229;border-radius:13px;box-shadow:0 0 0 1px #9298a0,7px 12px 15px #0004;transform:rotate(7deg);overflow:hidden}
.mock-phone:after{content:"";position:absolute;top:6px;left:34%;width:32%;height:5px;border-radius:8px;background:#202229}
.mock-phone img{display:block;width:100%;height:100%;object-fit:cover;object-position:top;border-radius:9px}
.brand-novalamps .mock-laptop{width:77%;margin-right:8%}
@media(max-width:760px){.mock-caption h3{font-size:22px}.web-mockup .brand-category{font-size:9px}}
@media(prefers-reduced-motion:reduce){.mock-laptop{transition:none}.web-mockup:hover .mock-laptop{transform:none}}
#proyectos .web-mockup.brand-fitness{color:#fff}
#proyectos .web-mockup.brand-fitness .mock-caption>span{opacity:.8}
.mock-stage{inset:19% 0 30%}

/* Compact, fully clickable three-column portfolio on phones. */
@media(max-width:760px){
#proyectos .brand-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}
#proyectos .web-mockup{aspect-ratio:auto;min-height:138px;border-radius:12px}
#proyectos .web-mockup .brand-banner-top{inset:7px 7px auto;justify-content:flex-end}
#proyectos .web-mockup .brand-category{display:none}
#proyectos .web-mockup .brand-arrow{width:19px;height:19px}
#proyectos .web-mockup .brand-arrow .link-arrow{width:12px;height:12px}
#proyectos .mock-stage{inset:29px 0 auto;height:58px}
#proyectos .mock-laptop{width:83%;filter:drop-shadow(0 6px 5px #23252e30)}
#proyectos .mock-screen{border-width:2px;border-top-width:3px;border-radius:3px 3px 1px 1px}
#proyectos .mock-base{height:3px;box-shadow:0 1px 0 #515761}
#proyectos .mock-base::before{height:1px}
#proyectos .mock-phone{padding:2px;border-radius:4px;box-shadow:0 0 0 1px #9298a0,2px 3px 4px #0003}
#proyectos .mock-phone img{border-radius:3px}
#proyectos .mock-phone::after{top:3px;height:2px}
#proyectos .mock-caption{left:8px;right:8px;bottom:10px}
#proyectos .mock-caption h3{font-size:11px;line-height:1.2;letter-spacing:-.02em;margin:0;overflow-wrap:anywhere;min-height:27px}
#proyectos .mock-caption>span{display:none}
#proyectos .web-mockup:hover{translate:none}
}
@media(max-width:360px){#proyectos .brand-grid{gap:6px}#proyectos .mock-caption{left:6px;right:6px}#proyectos .mock-caption h3{font-size:10px}}