:root{--red:#ff4d4d} .intro h1 span{color:#ff4d4d}.experience{background:#08090b;color:#f5f5f5;padding:80px 0}.experience .section-head p{max-width:650px;color:#aaa;line-height:1.7}.experience h2{font-size:clamp(38px,5vw,70px);line-height:1.05;letter-spacing:-2px;margin:24px 0}.demo-toolbar{display:flex;align-items:center;justify-content:space-between;gap:20px;font-size:10px;letter-spacing:1px;margin-top:40px;padding:18px 0}.demo-toolbar a{color:inherit}.demo-toolbar button{background:#ff4d4d;border:0;padding:12px 16px;font-weight:700;cursor:pointer}.demo-browser{position:relative;background:#151515;border:1px solid #333;border-radius:12px;overflow:hidden;aspect-ratio:16/10}.demo-browser>img{width:100%;height:100%;object-fit:cover;display:block}.demo-browser iframe{position:absolute;inset:0;width:100%;height:100%;border:0;background:#08090b}.activate{position:absolute;left:50%;top:70%;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:12px;padding:24px 32px;background:#08090be8;color:white;border:1px solid #ffffff60;border-radius:12px;font-size:12px;letter-spacing:1px;cursor:pointer;box-shadow:0 16px 50px #0007;width:max-content;max-width:90%}.activate>span{font-size:28px;color:#ff4d4d}.activate small{font-size:10px;letter-spacing:0;color:#ccc}.demo-caption{font-size:12px;color:#aaa;margin-top:20px}.process{display:grid;grid-template-columns:repeat(5,1fr);gap:24px;margin-top:60px}.process b{font-size:13px;color:#ff4d4d}.process h3{font-size:21px;line-height:1.2;margin:20px 0}.process p{font-size:13px;line-height:1.7;color:#bcbcbc}.chapter-map{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;margin:50px 0;background:#d0d0ca;border:1px solid #d0d0ca}.chapter-map span{padding:20px;background:#f4f4ee;font-size:10px;letter-spacing:1px}.wide-shot{margin:0}.wide-shot img{width:100%;border-radius:8px;display:block}figcaption{font-size:10px;letter-spacing:1px;margin-top:15px}.serena-palette{display:grid;grid-template-columns:repeat(3,1fr);margin-top:40px}.serena-palette span{padding:55px 24px;font-size:11px;font-weight:600}.responsive-shots{display:grid;grid-template-columns:3fr 1fr;align-items:start;gap:40px;margin-top:60px}.responsive-shots figure{margin:0}.responsive-shots img{width:100%;display:block;border:1px solid #ccc;border-radius:8px}.dark-band .pill{background:#ff4d4d;color:#08090b;border-color:#ff4d4d;margin-top:20px}button:focus-visible,a:focus-visible{outline:3px solid #ff4d4d;outline-offset:4px}[hidden]{display:none!important}@media(max-width:700px){.experience{padding:50px 0}.process{grid-template-columns:1fr;gap:12px;margin-top:35px}.process article{border-top:1px solid #444;padding-top:22px}.process h3{margin:12px 0}.demo-toolbar{flex-wrap:wrap;font-size:9px;gap:16px}.demo-browser{aspect-ratio:390/720;max-height:760px}.demo-browser>img{object-position:left}.activate{top:74%;padding:20px;font-size:10px}.chapter-map{grid-template-columns:1fr 1fr}.chapter-map span{padding:16px;font-size:9px}.serena-palette span{padding:35px 10px;font-size:9px}.responsive-shots{grid-template-columns:1fr;gap:30px}.responsive-shots figure:last-child{max-width:290px;margin:auto}.experience h2{letter-spacing:-1px}}
.demo-browser picture{display:block;width:100%;height:100%}.demo-browser picture img{width:100%;height:100%;object-fit:cover}@media(max-width:700px){.demo-browser picture img{object-position:top;object-fit:cover}.activate{top:80%}}

/* Prévia mais compacta, mantendo a proporção e espaço na altura da tela. */
@media(min-width:701px) {
    .demo-browser {
        width: min(100%, 1120px, calc((100svh - 180px) * 1.6));
        margin-inline: auto;
    }
    .demo-browser iframe {
        width: 111.1112%;
        height: 111.1112%;
        transform: scale(.9);
        transform-origin: top left;
    }
}
.demo-browser picture { display: block; width: 100%; height: 100%; }
.demo-browser picture img { display: block; width: 100%; height: 100%; object-fit: cover; }
.case-index nav{overflow-x:auto;justify-content:flex-start;gap:28px}
.serena-process-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px 32px}
.serena-process-grid article{border-top:1px solid #ffffff30;padding-top:24px}
.serena-process-grid article>span{font-size:9px;letter-spacing:1px;color:#ff9898}
.serena-process-grid h3{font-size:22px;line-height:1.25;letter-spacing:-.6px;margin:18px 0 15px}
.serena-process-grid p{font-size:14px;color:#b7b6b2;margin:0}
.serena-evidence{min-width:0;margin:0}
.serena-evidence .zoom{display:block;width:100%;background:#08090b;border:1px solid #ffffff18;border-radius:5px;overflow:hidden}
.serena-evidence img{display:block;width:100%;height:auto;border-radius:0}
.serena-evidence figcaption{margin-top:13px;font-size:9px;letter-spacing:.3px;line-height:1.6;align-items:start}
.serena-evidence figcaption>span{white-space:nowrap;font-size:8px;opacity:.7}
.dark-band .serena-evidence figcaption{color:#b7b6b2}
.serena-storyboard,.serena-state-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;margin-top:42px}
.serena-technical-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px;margin:48px 0}
.serena-technical-grid article{border-top:1px solid #d2d2cc;padding-top:24px}
.serena-technical-grid h3{font-size:22px;line-height:1.25;letter-spacing:-.6px;margin:12px 0 16px}
.serena-technical-grid p{font-size:14px;color:#5a5a54;margin:0}
.serena-film{margin-top:44px;background:#08090b;padding:20px;border-radius:8px}
.serena-film video{display:block;width:100%;max-height:650px;object-fit:contain}
.serena-film figcaption{color:#b7b6b2;margin:16px 0 0}
.serena-architecture{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;border:1px solid #d2d2cc;background:#d2d2cc;margin-top:45px}
.serena-architecture article{background:#f0f0e9;padding:28px}
.serena-architecture b{font-size:10px;letter-spacing:1px;color:#a0061e}
.serena-architecture p{font-size:16px;line-height:1.6;margin:15px 0 0}
.serena-page-decision{display:grid;grid-template-columns:.85fr 1.15fr;gap:64px;align-items:center;border-top:1px solid #ffffff2b;padding-top:50px;margin-top:60px}
.serena-page-decision h3{font-size:clamp(25px,2.8vw,36px);line-height:1.2;letter-spacing:-1.2px;margin:20px 0 24px}
.serena-page-decision p{font-size:14px;color:#b7b6b2}
.serena-page-decision .decision-note{border-color:#ff4d4d}
.serena-page-decision .decision-note b{color:#f5f4f1}
.serena-gallery-heading{border-top:1px solid #ffffff30;margin-top:90px;padding-top:50px}
.serena-gallery-heading h3{font-size:clamp(28px,3vw,42px);letter-spacing:-1.4px;margin:20px 0}
.serena-gallery-heading>p{max-width:760px;color:#b7b6b2;font-size:14px}
.serena-gallery-filters{display:flex;flex-wrap:wrap;gap:8px;margin-top:30px}
.serena-gallery-filters button{border:1px solid #ffffff30;border-radius:24px;padding:11px 17px;min-height:44px;background:transparent;color:#bbb;font-size:11px}
.serena-gallery-filters button[aria-pressed=true]{background:#ff4d4d;border-color:#ff4d4d;color:#08090b}
.serena-gallery-filters button:hover{border-color:#ff4d4d}
.serena-gallery-count{font-size:11px;color:#9c9c94;margin:18px 0 24px}
.serena-pages-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;align-items:start}
.serena-page-card{min-width:0;border:1px solid #ffffff25;background:#16181c;border-radius:8px;overflow:hidden}
.serena-page-card>.zoom{overflow:hidden;border-bottom:1px solid #ffffff20}
.serena-page-card>.zoom img{width:100%;height:auto;aspect-ratio:1.44;object-fit:cover;object-position:top;transition:transform 220ms ease}
.serena-page-card>.zoom:hover img{transform:scale(1.025)}
.serena-page-card>div{padding:22px}
.serena-page-card .eyebrow{font-size:8px;color:#fb9999;text-transform:uppercase}
.serena-page-card h3{font-size:21px;line-height:1.25;letter-spacing:-.5px;margin:13px 0}
.serena-page-card p{font-size:12px;line-height:1.7;color:#b7b6b2;min-height:42px}
.serena-card-links{display:flex;justify-content:space-between;gap:12px;align-items:center;border-top:1px solid #ffffff20;padding-top:12px}
.serena-card-links .zoom{width:auto;font-size:8px;letter-spacing:.5px;color:#ddd;min-height:36px;text-align:left;cursor:pointer}
.serena-card-links a{font-size:9px;white-space:nowrap;color:#b7b6b2}
.serena-token-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin-top:45px}
.serena-token-grid article{background:var(--token);color:#f5f4f1;padding:26px;min-height:190px;display:flex;flex-direction:column;justify-content:space-between}
.serena-token-grid article:nth-child(3),.serena-token-grid .light-token{color:#08090b}
.serena-token-grid span{font-size:9px;letter-spacing:1px}.serena-token-grid b{font-size:20px;margin-top:35px}.serena-token-grid p{font-size:11px;margin:12px 0 0}
.serena-component-table{overflow-x:auto;border:1px solid #d2d2cc}
.serena-component-table table{border-collapse:collapse;width:100%;font-size:13px;line-height:1.65;text-align:left}
.serena-component-table th{font-size:10px;letter-spacing:1px;text-transform:uppercase;background:#eaeae4}
.serena-component-table th,.serena-component-table td{padding:20px 22px;border-bottom:1px solid #d2d2cc;vertical-align:top}
.serena-component-table td:first-child{font-weight:600;color:#171717;white-space:nowrap}
.serena-component-table td{color:#5a5a54}
.serena-stack{display:flex;flex-wrap:wrap;gap:9px;margin-top:28px}
.serena-stack span{padding:10px 15px;border:1px solid #ccc;border-radius:30px;font-size:11px}
.serena-source-note{font-size:11px;color:#777;line-height:1.7;max-width:800px;margin-top:25px}
.serena-mobile-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px;margin:48px auto 0;max-width:940px}
.serena-mobile-grid .serena-evidence{max-width:280px}
.serena-mobile-grid .serena-evidence .zoom{border-radius:16px;border:7px solid #16181c}
.serena-result-points{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px;margin-top:50px;border-top:1px solid #ffffff30;padding-top:28px}
.serena-result-points b{font-size:9px;letter-spacing:1px;color:#ff9898}.serena-result-points p{font-size:14px;color:#b7b6b2;margin:15px 0 0}
@media(max-width:1000px){.serena-pages-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.serena-page-decision{gap:32px}.serena-process-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.serena-technical-grid{gap:22px}}
@media(max-width:700px){.serena-process-grid,.serena-storyboard,.serena-state-pair,.serena-technical-grid,.serena-architecture,.serena-page-decision,.serena-result-points{grid-template-columns:1fr;gap:26px}.serena-page-decision{margin-top:40px;padding-top:35px}.serena-gallery-heading{margin-top:55px;padding-top:35px}.serena-pages-grid{grid-template-columns:1fr}.serena-page-card>div{padding:20px}.serena-token-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.serena-token-grid article{padding:20px;min-height:170px}.serena-mobile-grid{gap:24px;grid-template-columns:1fr}.serena-mobile-grid .serena-evidence{margin:auto;width:100%;max-width:300px}.serena-component-table th,.serena-component-table td{padding:14px 12px}.serena-component-table table{font-size:11px;min-width:540px}.serena-film{padding:12px}.serena-evidence figcaption{font-size:8px}}

/* Crop the 15 px browser scrollbar baked into 1425 px source captures. */
.serena-evidence img.serena-capture-desktop{width:calc(100% * 1425 / 1410);max-width:none}
#dialog-img.serena-capture-desktop{clip-path:inset(0 1.052632% 0 0)}

/* Keep viewport captures framed around the interface, excluding empty capture padding. */
.serena-evidence img.serena-capture-viewport{aspect-ratio:1.44;height:auto;object-fit:cover;object-position:top}
.serena-page-decision>*,.serena-state-pair>*{min-width:0}
.serena-live-page{margin:64px 0 0;padding-top:48px;border-top:1px solid #ffffff2b;min-width:0}
.serena-live-heading{display:flex;align-items:end;justify-content:space-between;gap:32px;margin-bottom:24px}
.serena-live-heading>div{max-width:720px}
.serena-live-heading h3{font-size:clamp(25px,3vw,36px);letter-spacing:-1px;margin:16px 0}
.serena-live-heading p{font-size:14px;color:#b7b6b2;margin:0}
.serena-live-heading>a{font-size:10px;white-space:nowrap;text-decoration:underline;text-underline-offset:5px}
.serena-live-viewport{position:relative;width:100%;aspect-ratio:16/10;overflow:hidden;border:1px solid #ffffff20;border-radius:8px;background:#08090b}
.serena-live-viewport iframe{display:block;width:calc(100% + 18px);height:100%;border:0}
.serena-live-page figcaption{margin-top:14px;font-size:9px;letter-spacing:.3px;color:#b7b6b2}
@media(max-width:700px){.serena-live-heading{display:block}.serena-live-heading>a{display:inline-block;margin-top:20px}.serena-live-viewport{aspect-ratio:auto;height:580px}.serena-live-page figcaption{flex-wrap:wrap}}

/* Frame gallery thumbnails around the page opening, excluding empty capture padding. */
.serena-page-card>.zoom{aspect-ratio:16/9;display:block}
.serena-page-card>.zoom img{display:block;width:100%;height:100%;aspect-ratio:auto;object-fit:cover;object-position:center top}
.serena-page-card>.zoom img.serena-capture-desktop{width:calc(100% * 1425 / 1410);max-width:none}

.serena-brand-intro .serena-live-page{margin:0;padding-top:0;border-top:0}

.serena-brand-bridge{max-width:760px;margin:28px 0 0;font-size:15px;line-height:1.7;color:#b7b6b2}

.serena-brand-film{overflow:hidden;border-radius:8px;border:1px solid #ffffff20;background:#08090b}
.serena-brand-film video{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:contain}

/* Site hierarchy: semantic lists with visible parent and child connectors. */
.serena-sitemap{margin:48px 0 0;padding:32px;background:#101114;color:#f5f4f1;border-radius:12px;border:1px solid #303237}
.sitemap-heading{display:flex;justify-content:space-between;align-items:end;gap:24px;margin-bottom:36px}
.sitemap-heading .eyebrow,.sitemap-support-heading .eyebrow{color:#ff8f8f;font-size:9px;letter-spacing:1.2px}
.sitemap-heading h3{font-size:clamp(25px,3vw,36px);letter-spacing:-1px;margin-top:14px}
.sitemap-key{font-size:10px;color:#aaa;line-height:1.6}
.sitemap-root{position:relative;max-width:350px;margin:0 auto 48px;text-align:center;border:1px solid #ff6262;border-radius:7px;background:#21191c;padding:20px}
.sitemap-root>a{display:flex;justify-content:space-between;gap:12px;font-weight:600;font-size:17px}
.sitemap-root>span{display:block;font-size:11px;color:#b8b8b4;margin-top:10px;line-height:1.6}
.sitemap-root:after{content:'';position:absolute;height:49px;width:1px;background:#555860;left:50%;top:100%}
.sitemap-level{font-size:9px;letter-spacing:1.5px;color:#b8b8b4;position:relative;background:#101114;display:table;margin:0 auto 0;padding:0 12px;z-index:1}
.serena-sitemap ul{list-style:none;margin:0;padding:0}
.sitemap-branches{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:16px;padding-top:26px!important;position:relative}
.sitemap-branches:before{content:'';position:absolute;top:12px;left:calc((100% - 80px)/12);right:calc((100% - 80px)/12);height:1px;background:#555860}
.sitemap-branch{min-width:0;position:relative}
.sitemap-branch:before{content:'';position:absolute;left:50%;top:-14px;height:14px;width:1px;background:#555860}
.sitemap-group{min-height:119px;padding:15px 12px;border:1px solid #42444a;border-radius:6px;background:#1a1c21}
.sitemap-group>span{font-size:9px;color:#ff8f8f;letter-spacing:1px}
.sitemap-group h4{font-size:14px;font-weight:600;margin:10px 0 7px;line-height:1.4}
.sitemap-group p{font-size:10px;line-height:1.5;color:#aaa;margin:0}
.sitemap-branch>ul{margin:16px 0 0 8px;border-left:1px solid #42444a;padding-left:10px}
.sitemap-branch>ul>li{position:relative;margin-bottom:9px}
.sitemap-branch>ul>li:before{content:'';position:absolute;left:-10px;top:19px;width:10px;height:1px;background:#42444a}
.sitemap-branch li a,.sitemap-support-grid a{display:flex;justify-content:space-between;align-items:start;gap:8px;font-size:11px;line-height:1.5;min-height:40px;padding:10px;border:1px solid #35373d;border-radius:4px;background:#17191d}
.serena-sitemap a:hover{border-color:#ff6262;color:#ffaaaa}
.serena-sitemap a:focus-visible{outline:2px solid #ff6262;outline-offset:3px}
.serena-sitemap a span{color:#a2a29e;flex-shrink:0}
.sitemap-external{display:block;font-size:9px;line-height:1.7;color:#aaa;margin:12px 0 0;overflow-wrap:anywhere}
.sitemap-support{border-top:1px dashed #555860;margin-top:32px;padding-top:26px}
.sitemap-support-heading{display:flex;gap:30px;justify-content:space-between;align-items:start;margin-bottom:22px}
.sitemap-support-heading p{max-width:610px;font-size:12px;line-height:1.6;color:#aaa;margin:0}
.sitemap-support-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:24px}
.sitemap-support-grid h4{font-size:13px;font-weight:600;margin:0 0 15px}
.sitemap-support-grid li{margin-top:8px}
.sitemap-subpages{margin:8px 0 12px 14px!important;padding-left:12px!important;border-left:1px solid #42444a}
.serena-sitemap figcaption{margin-top:26px;padding-top:20px;border-top:1px solid #35373d;display:flex;justify-content:space-between;gap:24px;font-size:10px;line-height:1.7;letter-spacing:0;color:#aaa}
.serena-sitemap figcaption a{white-space:nowrap;text-decoration:underline;text-underline-offset:4px}
.serena-ia-principles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px;margin-top:36px}
.serena-ia-principles article{border-top:1px solid #d2d2cc;padding-top:24px;min-width:0}
.serena-ia-principles .eyebrow{font-size:9px;color:#a0061e;line-height:1.6}
.serena-ia-principles h3{font-size:22px;letter-spacing:-.5px;margin:15px 0}
.serena-ia-principles p{font-size:14px;color:#5a5a54}
@media(max-width:1050px){.sitemap-branches{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:28px}.sitemap-branches:before,.sitemap-branch:before{display:none}.sitemap-level{margin-bottom:12px}.sitemap-root:after{height:36px}.sitemap-group{min-height:110px}}
@media(max-width:700px){.serena-sitemap{padding:22px 16px;margin-top:32px}.sitemap-heading,.sitemap-support-heading{display:block}.sitemap-key{display:block;margin-top:16px}.sitemap-heading{margin-bottom:28px}.sitemap-support-heading p{margin-top:14px}.sitemap-branches{grid-template-columns:1fr;padding-left:16px!important;border-left:1px solid #555860;margin-left:8px!important}.sitemap-branch:before{display:block;left:-17px;top:30px;width:17px;height:1px}.sitemap-group{min-height:0}.sitemap-branch>ul{margin-left:12px}.sitemap-root{margin-bottom:36px}.sitemap-root:after{height:28px}.sitemap-support-grid,.serena-ia-principles{grid-template-columns:1fr}.serena-sitemap figcaption{display:block}.serena-sitemap figcaption a{display:block;margin-top:12px}}

.serena-mobile-grid .serena-evidence img{width:100%;height:auto;aspect-ratio:390/844;object-fit:contain;max-width:100%}
.serena-mobile-source{font-size:11px;color:#777;margin-top:24px}

.serena-content-tradeoff{margin-top:44px;padding:28px 32px;border-left:2px solid #ff4d4d;background:#ffffff06;max-width:960px}
.serena-content-tradeoff .eyebrow{color:#ff9898;font-size:9px;letter-spacing:1.2px}
.serena-content-tradeoff h3{font-size:clamp(23px,2.6vw,30px);line-height:1.3;letter-spacing:-.7px;margin:16px 0 20px}
.serena-content-tradeoff p{font-size:15px;line-height:1.75;color:#b7b6b2;max-width:800px}
.serena-content-tradeoff p:last-child{margin-bottom:0}
@media(max-width:700px){.serena-content-tradeoff{padding:24px 20px}}

.serena-gallery-disclosure{margin-top:80px;border-top:1px solid #ffffff2b;border-bottom:1px solid #ffffff2b}
.serena-gallery-disclosure>summary{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:30px 0;cursor:pointer;list-style:none}
.serena-gallery-disclosure>summary::-webkit-details-marker{display:none}
.serena-gallery-disclosure>summary::marker{content:''}
.serena-gallery-disclosure>summary .eyebrow{font-size:10px;color:#ff9898}
.serena-gallery-disclosure>summary h3{font-size:clamp(25px,3vw,42px);line-height:1.2;letter-spacing:-1.2px;margin:16px 0 0}
.serena-gallery-disclosure>summary:focus-visible{outline:2px solid #ff4d4d;outline-offset:6px}
.serena-gallery-toggle{position:relative;flex:0 0 48px;width:48px;height:48px;border:1px solid #ffffff50;border-radius:50%;transition:background 180ms ease,border-color 180ms ease}
.serena-gallery-toggle:before,.serena-gallery-toggle:after{content:'';position:absolute;background:#f5f4f1;left:14px;right:14px;height:2px;top:22px}
.serena-gallery-toggle:after{transform:rotate(90deg)}
.serena-gallery-disclosure[open] .serena-gallery-toggle:after{display:none}
.serena-gallery-disclosure>summary:hover .serena-gallery-toggle{background:#ff4d4d;border-color:#ff4d4d}
.serena-gallery-content{padding:0 0 32px}
.serena-gallery-description{font-size:14px;line-height:1.7;color:#b7b6b2;max-width:760px}
@media(max-width:700px){.serena-gallery-disclosure{margin-top:48px}.serena-gallery-disclosure>summary{gap:16px;padding:24px 0}.serena-gallery-toggle{flex-basis:44px;width:44px;height:44px}.serena-gallery-toggle:before,.serena-gallery-toggle:after{left:12px;right:12px;top:20px}}