.demo-viewport{position:relative;width:100%;aspect-ratio:1440/1000;overflow:hidden;background:#f3f2ed;isolation:isolate}
.demo-viewport iframe{display:block;position:absolute;left:0;top:0;width:100%;height:100%;border:0;background:#f3f2ed;transform-origin:0 0;pointer-events:none;opacity:0;transition:opacity .3s ease}
.demo-viewport.is-loaded iframe{opacity:1}
.demo-viewport--static iframe{opacity:1;transition:none}
.demo-viewport--static::after{display:none}
.demo-viewport::after{content:attr(data-demo-label);position:absolute;left:22px;top:22px;color:#28414c;font-size:15px;font-weight:500;pointer-events:none}
.demo-viewport.is-loaded::after{display:none}
.phone-frame>.demo-viewport,.responsive-phone>.demo-viewport{height:100%;aspect-ratio:auto;border-radius:inherit}
.phone-frame .demo-viewport::after,.responsive-phone .demo-viewport::after{font-size:11px;left:12px;top:35px}
.project-card{text-decoration:none;color:inherit;display:block;min-width:0}
.project-card .project-image{background:var(--project-tone,#dce7e7)}
.project-card .project-window{width:88%;margin-inline:auto}
.project-card.project-wide .project-window{width:86%}
.project-card .demo-viewport{aspect-ratio:1.6}
.project-card.project-wide .demo-viewport{aspect-ratio:2.05}
.project-card:focus-visible{outline:3px solid var(--blue);outline-offset:7px;border-radius:5px}
.project-card .project-meta h3{font-size:1.25rem;line-height:1.35}
.project-card .project-meta p{line-height:1.6}
.project-type{position:absolute;left:24px;top:21px;z-index:2;background:#ffffffdd;padding:7px 11px;color:#19313f;font-size:.6875rem;letter-spacing:.055em;text-transform:uppercase;border-radius:2px}
.project-preview-note{font-size:.8125rem;line-height:1.75;margin-top:18px;color:var(--muted)}
.identity-browser>.demo-viewport{aspect-ratio:1440/1000}
.story-screen>.demo-viewport{aspect-ratio:1440/1000}
.studio-mosaic>.demo-viewport:first-child{position:absolute;width:92%;height:230px;aspect-ratio:auto;left:30px;top:43px;transform:rotate(-8deg);border:5px solid #fff;border-radius:5px;box-shadow:0 15px 35px #11273733}
.studio-mosaic>.demo-viewport:nth-child(2){position:absolute;right:17px;top:20px;width:100px;height:213px;aspect-ratio:auto;transform:rotate(8deg);border:5px solid #102035;border-radius:16px;box-shadow:0 15px 35px #11273733}
.project-dialog{max-width:1180px}
.project-dialog-canvas{margin-top:18px;background:#ecefeb;border:1px solid #d9e1e4;overflow:hidden;border-radius:5px;width:100%;height:min(68svh,740px);min-height:340px}
.project-dialog-canvas iframe{display:block;width:100%;height:100%;border:0;background:#f3f2ed}
.project-dialog-canvas.mobile-preview{max-width:390px;margin-inline:auto}
.project-dialog-actions{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-top:22px}
.project-dialog-actions .button{margin-top:0}
.demo-open-link{display:inline-flex;align-items:center;gap:9px;min-height:44px;color:var(--ink);font-size:.875rem;text-underline-offset:5px}
.demo-open-link:focus-visible{outline:2px solid var(--blue);outline-offset:4px}
@media(max-width:720px){.project-card .project-meta h3{font-size:1.1rem}.project-card .project-window,.project-card.project-wide .project-window{width:90%}.project-card.project-wide .demo-viewport{aspect-ratio:1.6}.project-type{top:14px;left:14px;font-size:.625rem}.project-dialog-actions{flex-direction:column;align-items:flex-start}.project-dialog-actions .button{width:100%;justify-content:center}.project-dialog-canvas{height:58svh;min-height:320px}.project-dialog{padding:20px}.project-dialog .dialog-toolbar h2{font-size:1.5rem;max-width:calc(100% - 20px)}}

/* Etiqueta do serviço que cada projeto representa (2026-10-10) */
.project-meta .project-service{display:inline-block;margin-top:9px;padding:3px 9px;border:1px solid #c6d3df;border-radius:999px;font-size:.75rem;font-weight:600;color:var(--ink);letter-spacing:.01em}