/* Geometría y detalles compartidos: laptop 16:10, teléfono y tablet. */
.device-stage,.viewer-stage{position:relative;min-width:0;background:var(--surface);overflow:hidden;border-radius:14px}
.device-shell{position:absolute;top:20px;left:50%;flex:none;max-width:none;background:#080b10;border:2px solid #9097a1;padding:20px 14px 14px;border-radius:24px 24px 12px 12px;transform-origin:top center;color-scheme:light}
.device-screen{overflow:hidden;background:#080b10;border-radius:7px;aspect-ratio:auto}
.device-shell::before{content:'';position:absolute;left:50%;top:7px;width:6px;height:6px;border-radius:50%;background:#223549;transform:translateX(-50%)}
.device-shell[data-device=desktop]::after{content:'';position:absolute;left:-6%;top:calc(100% + 2px);width:112%;height:20px;background:#aeb3ba;border-radius:2px 2px 45% 45% / 2px 2px 18px 18px;border-bottom:6px solid #69717d}
.device-hardware{position:absolute;z-index:1;left:42%;top:calc(100% + 2px);width:16%;height:7px;background:#757d89;border-radius:0 0 10px 10px}
.device-shell[data-device=mobile]{border:3px solid #969ca5;padding:14px 10px;border-radius:51px;background:#090b0e}
.device-shell[data-device=mobile] .device-screen{border-radius:36px}
.device-shell[data-device=mobile]::before{z-index:2;top:9px;width:86px;height:16px;background:#090b0e;border-radius:20px}
.device-shell[data-device=mobile] .device-hardware{top:auto;bottom:22px;left:34%;width:32%;height:4px;border-radius:5px;background:#aeb5c0;pointer-events:none}
.device-shell[data-device=tablet]{border:3px solid #969ca5;padding:22px 16px;border-radius:36px}
.device-shell[data-device=tablet] .device-screen{border-radius:15px}
.device-shell[data-device=tablet]::before{top:8px;width:7px;height:7px}
.device-shell[data-device=tablet] .device-hardware{top:auto;bottom:10px;left:40%;width:20%;height:4px;border-radius:4px}
.preview-images.device-stage{height:440px;aspect-ratio:auto;display:block;padding:0}
.preview-images .device-shell{max-width:none}
.preview-images .device-screen{aspect-ratio:auto}
.preview-images .device-screen img,.preview-images.is-mobile .device-screen img{width:100%;height:100%;max-width:100%;object-fit:contain;object-position:center}
.preview-images.is-mobile{background:var(--surface)}
.viewer-page{min-height:100svh}
.viewer-header{padding-block:20px;display:flex;align-items:center;justify-content:space-between;gap:20px}
.viewer-back{min-height:44px;display:inline-flex;align-items:center;gap:12px;font-size:var(--small)}
.viewer-brand{font-weight:700;font-size:var(--small);text-decoration:none}
.viewer-main{padding-bottom:48px}
.viewer-heading{display:flex;align-items:end;justify-content:space-between;gap:24px;margin:24px 0}
.viewer-heading h1{font-size:clamp(2rem,4vw,3.8rem)}
.viewer-heading p{font-size:var(--small);margin-top:12px}
.viewer-controls{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:16px}
.device-options{display:flex;gap:4px;background:var(--paper);padding:5px;border-radius:100px}
.device-options button{border:0;background:transparent;color:var(--ink);padding:10px 20px;min-height:44px;border-radius:100px;font-size:var(--small);cursor:pointer}
.device-options button[aria-pressed=true]{background:var(--accent);color:var(--on-accent)}
.viewer-stage{height:320px}
.viewer-stage iframe{display:block;border:0;max-width:none;background:#fff}
.viewer-status{font-size:var(--small);color:var(--muted);margin-bottom:8px}.viewer-status:empty{display:none}
.viewer-retry{background:transparent;color:var(--ink);border:0;text-decoration:underline;min-height:44px;padding:8px;cursor:pointer;font-size:var(--small)}
.project-story{display:grid;grid-template-columns:1.2fr 1fr;gap:40px 64px;margin-top:64px}
.project-story>div:last-child{grid-column:1/-1}
.project-story h2{font-size:clamp(1.9rem,3vw,2.8rem);margin-bottom:24px}
.project-story h3{font-size:var(--lead);margin-bottom:16px;letter-spacing:-.02em}
.project-story p{max-width:62ch;line-height:1.75}
.project-story ul{padding-left:20px;margin:0;display:grid;grid-template-columns:1fr 1fr;gap:10px 40px}
.project-bottom{display:flex;justify-content:space-between;align-items:center;gap:24px;margin-top:56px}
.viewer-noscript{padding:24px;background:var(--paper)}
.all-projects{margin-top:48px;text-align:center}
.projects-intro{padding-block:64px 56px;max-width:850px}
.projects-intro h1{font-size:clamp(3rem,7vw,6rem)}
.projects-intro p{max-width:57ch;margin-top:24px;font-size:var(--lead)}
.project-list{display:grid;gap:72px;padding-bottom:80px}
.project-list-item{display:grid;grid-template-columns:1.35fr 1fr;gap:48px;align-items:center;scroll-margin-top:110px}
.project-list-image{display:block;background:var(--paper);padding:20px;border-radius:14px;text-decoration:none;overflow:hidden}
.project-list-image img{aspect-ratio:16/10;width:100%;object-fit:contain}
.project-list-copy h2{font-size:clamp(2rem,3.6vw,3.4rem);margin:16px 0 20px}
.project-list-copy>p:first-child{font-size:var(--small);color:var(--muted)}
.project-list-copy>p{max-width:50ch}.project-list-copy .text-link{margin-top:20px}
@media(max-width:800px){.preview-images.device-stage{height:400px}.viewer-heading{align-items:start;flex-direction:column;gap:12px}.project-list-item{gap:28px}.project-story{gap:32px}.project-list{gap:56px}}
@media(max-width:600px){
 .preview-images.device-stage{height:360px}
 .viewer-header{gap:12px;padding-block:12px}.viewer-brand{max-width:12ch;text-align:right;line-height:1.25}
 .viewer-heading{margin:20px 0}.viewer-controls{gap:4px}.device-options{width:100%}.device-options button{flex:1;min-width:0;padding:10px 8px}
 .viewer-heading .text-link{font-size:var(--small)}
 .project-story{grid-template-columns:1fr;margin-top:36px;gap:28px}.project-story ul{grid-template-columns:1fr}
 .project-bottom{align-items:start;flex-direction:column;margin-top:32px;gap:20px}
 .projects-intro{padding-block:40px}.projects-intro p{font-size:var(--body)}
 .project-list-item{grid-template-columns:1fr;gap:24px}.project-list-image{padding:12px}.project-list-copy h2{margin:12px 0 16px}
}
@media(prefers-reduced-motion:no-preference){.device-options button{transition:background-color .18s ease}@keyframes device-fade{from{opacity:.65}to{opacity:1}}.viewer-stage .device-shell[data-changing]{animation:device-fade .25s ease}.project-list-image img{transition:transform .5s var(--ease)}.project-list-image:hover img,.project-list-image:focus-visible img{transform:scale(1.015)}}

.nav-links a[aria-current=page]::after{transform:scaleX(1)}

.projects-intro>.viewer-back{margin-bottom:24px}