/* TM21 V4 — catálogo em linhas equilibradas e visual editorial */
:root{--v4-blue:#7eaaff;--v4-ink:#0a0d12}
/* Intro */
.hero h1{font-size:clamp(4.8rem,7.7vw,8.5rem);letter-spacing:-.055em}
.portfolio-bridge{background:#122035;border-block:1px solid #283d59}
.portfolio-bridge .bridge-intro>p:not(.eyebrow){color:#c0cad8}
.selected-section{background:#0b0f16}
.selected-section .section-heading h2{font-size:clamp(4.5rem,7vw,7.7rem)}
/* Intentional row rhythm: two large, then three equal cards, then three equal cards */
.catalogue-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));grid-auto-flow:row;gap:22px;align-items:stretch}
.catalogue-grid .project-card{grid-column:span 2;min-width:0;height:100%;display:flex;flex-direction:column}
.catalogue-grid .project-card.card-large{grid-column:span 3}
.catalogue-grid .project-card .visual{height:210px}
.catalogue-grid .project-card.card-large .visual{height:280px}
.catalogue-grid .project-card .project-card-body{display:flex;flex-direction:column;flex:1;padding:22px 23px 23px}
.catalogue-grid .project-card .project-kinds{min-height:24px;display:flex;justify-content:space-between;align-items:flex-start;gap:8px;margin:0 0 14px}
.catalogue-grid .project-card .project-kinds span:last-child{max-width:105px;text-align:right}
.catalogue-grid .project-card h3{font-size:clamp(1.9rem,2.75vw,2.65rem);line-height:1.03;min-height:2.08em;margin:0 0 12px;overflow-wrap:normal}
.catalogue-grid .project-card.card-large h3{font-size:clamp(2.35rem,3.5vw,3.25rem);min-height:1.05em}
.catalogue-grid .project-card .project-card-body>p{min-height:4.95em;font-size:.91rem;line-height:1.65;margin:0 0 14px}
.catalogue-grid .project-card.card-large .project-card-body>p{min-height:3.3em}
.catalogue-grid .project-role{margin-top:auto;min-height:92px;padding-top:14px}
.catalogue-grid .project-card.card-large .project-role{min-height:69px}
.catalogue-grid .text-arrow{margin-top:16px}
.catalogue-grid .visual--jobup-safe>img{object-fit:contain;object-position:left center;background:#f9f9fa}
.catalogue-grid .visual--catevia-safe>img{object-fit:cover;object-position:left top}
.catalogue-grid .visual--phone-card>img{object-fit:contain;object-position:center top;padding:8px 12px 0}
.catalogue-grid .visual--contain>img{object-fit:contain;object-position:center center;padding:14px}
/* Site section: cooler light shade, with restrained luminance */
.sites-preview{background:#d8e1e5;border-block:0;color:#16222e;padding:100px 0}
.sites-v4-heading{display:grid;grid-template-columns:1fr .62fr;gap:50px;align-items:end;margin-bottom:32px}
.sites-v4-heading .eyebrow{color:#345d92}
.sites-v4-heading h2{font-size:clamp(4rem,6vw,6rem);margin:10px 0 0;color:#142233}
.sites-v4-heading>p{font-size:1rem;line-height:1.65;color:#3c4e5c;margin:0 0 6px}
.sites-v4-grid{display:grid;grid-template-columns:1.18fr .82fr;gap:22px}
.web-feature{border:1px solid #9dafbd;border-radius:20px;overflow:hidden;display:flex;flex-direction:column;background:#eff3f5;box-shadow:0 18px 48px #4e678020;min-width:0}
.web-photo,.web-metric{height:265px;display:block;overflow:hidden;border-bottom:1px solid #b6c7d0}
.web-photo img{width:100%;height:100%;object-fit:cover;object-position:center top;transition:transform .35s}
.web-photo:hover img{transform:scale(1.03)}
.web-metric{background:#17273b;color:#ecf2f6;padding:22px 27px;position:relative}
.web-metric-top,.web-metric small{font:600 .65rem ui-monospace,monospace;letter-spacing:.09em;color:#9fb9d4}
.web-metric>strong{display:block;margin-top:16px;font:400 clamp(3.2rem,5vw,5.2rem)/.85 var(--display);letter-spacing:-.06em}
.web-metric>strong span{color:#83aeff}
.web-metric>small{position:absolute;bottom:19px}
.web-metric-lines{position:absolute;right:23px;top:63px;display:grid;gap:12px;width:31%;opacity:.47}
.web-metric-lines i{display:block;height:7px;border-radius:3px;background:#7295b9}
.web-metric-lines i:nth-child(2){width:70%}.web-metric-lines i:nth-child(3){width:88%}
.web-info{padding:25px 28px 28px;flex:1}
.web-info .web-status{font:700 .65rem ui-monospace,monospace;letter-spacing:.07em;color:#3b608d}
.web-info h3{font:400 3.25rem/1 var(--display);letter-spacing:-.04em;color:#12253b;margin:11px 0}
.web-info p{font-size:.95rem;color:#3d4e60;line-height:1.6;margin:0 0 23px}
.web-info a,.sites-more{font-size:.86rem;font-weight:700;color:#234f91}
.sites-more{margin-top:28px;display:flex;align-items:center;justify-content:space-between;padding:19px 4px;border-top:1px solid #90a4b3}
.sites-more:hover{text-decoration:underline}
.competencies{background:#122034}
.competency-grid article{display:flex;flex-direction:column;min-height:290px}
.competency-grid article h3{font-size:clamp(1.9rem,2.4vw,2.4rem);min-height:2.18em}
.competency-grid article>small{margin-top:auto}
.future-section{background:#10151e;border-top:1px solid #27364a;border-bottom:1px solid #27364a;padding:90px 0}
.future-inner{display:grid;grid-template-columns:.85fr 1.15fr;gap:10%;align-items:start}
.future-inner h2{font-size:clamp(3.2rem,4.3vw,5rem);margin:10px 0}
.future-items{display:grid;gap:12px}
.future-items p{display:grid;gap:6px;padding:15px 0;margin:0;border-top:1px solid #5360706d}
.future-items strong{font-size:1rem;color:#fff}
.future-items span{font-size:.86rem;color:#a6b5c4;line-height:1.7}
/* Cases: preserve full screenshots and portrait at original proportion */
.case-title-layout{grid-template-columns:1.08fr .92fr;gap:5%;align-items:center}
.case-hero h1{font-size:clamp(3.8rem,6.5vw,7.2rem);overflow-wrap:normal}
.case-hero-visual{display:grid;place-items:center;min-width:0}
.case-device-shell{display:inline-flex;align-items:center;justify-content:center;width:min(100%,245px);padding:6px;background:#121e26;border:1px solid #3a4f5d;border-radius:24px;box-shadow:0 24px 50px #0008}
.case-device-shell img{width:100%;height:auto;display:block;border-radius:18px}
.case-hero-visual--phone{min-height:470px}
.case-frame{width:100%;border-radius:18px;overflow:hidden;border:1px solid #3c4d5c;background:#fff;box-shadow:0 18px 50px #0007}
.case-frame img{display:block;width:100%;height:auto;object-fit:contain;object-position:left top}
.case-frame--left img{object-position:left top}
.case-concept-seo,.case-concept-ops{padding:30px;background:linear-gradient(140deg,#243652,#131b25);width:100%;min-height:310px;border-radius:20px;border:1px solid #45576b;display:flex;flex-direction:column;justify-content:space-between;color:#f0f3f5}
.case-concept-seo>span,.case-concept-ops>span{font:600 .72rem ui-monospace,monospace;color:#94b4d9;letter-spacing:.08em}
.case-concept-seo strong,.case-concept-ops strong{font:400 clamp(3.2rem,4.6vw,5rem)/.91 var(--display);letter-spacing:-.05em}
.case-concept-seo strong span{color:#8bb0ff}
.case-concept-seo>div,.case-concept-ops>div{font-size:.83rem;color:#bac7d9}
.case-content>section{margin-bottom:80px}
.case-block h2{font-size:clamp(2.65rem,3.5vw,4.25rem)}
.learning-grid{display:grid;gap:12px}
.learning-item{padding:22px 24px;background:#131c27;border:1px solid #2a3b50;border-radius:14px}
.learning-item h3{font-family:var(--body);font-size:1.02rem;font-weight:700;letter-spacing:-.01em;line-height:1.4;margin-bottom:9px}
.learning-item p{margin:0;font-size:.92rem!important;line-height:1.7!important}
.case-gallery{grid-template-columns:1fr;gap:20px}
.case-shot{margin:0}
.case-shot img{width:100%;height:auto;object-fit:contain}
.case-gallery--phone{display:flex;justify-content:flex-start;flex-wrap:wrap}
.case-gallery--phone .case-shot{width:min(100%,330px)}
.aside-back{font-size:.78rem;color:#a1b9d4;text-decoration:underline}
.case-stage{border-top:1px solid #34465b;padding-top:20px}
.case-stage h2{font-size:clamp(2.3rem,3vw,3.8rem)}
.related-link{margin-top:18px}
.case-external{display:inline-block;padding:13px 0;color:#90b6ff;font-size:.94rem;text-decoration:underline;text-underline-offset:4px}
.site-own{background:#152943;display:flex;align-items:center;padding:28px;color:#fff}
.site-own div{display:flex;flex-direction:column;gap:12px}
.site-own span{font:.69rem ui-monospace,monospace;color:#9dc2ec}
.site-own strong{font:400 3.5rem var(--display);line-height:1}
.site-own small{color:#aec5da}
/* Prevent abrupt brightness and uneven card composition on tablet */
@media(max-width:1100px){
 .catalogue-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
 .catalogue-grid .project-card,.catalogue-grid .project-card.card-large{grid-column:span 1}
 .catalogue-grid .project-card .visual,.catalogue-grid .project-card.card-large .visual{height:230px}
 .catalogue-grid .project-card h3,.catalogue-grid .project-card.card-large h3{min-height:2.08em;font-size:2.2rem}
 .catalogue-grid .project-card .project-card-body>p,.catalogue-grid .project-card.card-large .project-card-body>p{min-height:4.9em}
 .catalogue-grid .project-role,.catalogue-grid .project-card.card-large .project-role{min-height:93px}
}
@media(max-width:900px){
 .case-title-layout{grid-template-columns:1fr}
 .case-hero-visual--phone{min-height:unset;justify-content:center}
 .case-device-shell{width:min(66vw,245px)}
 .case-frame{max-width:690px}
 .sites-v4-heading{grid-template-columns:1fr;gap:12px}
 .sites-v4-grid{grid-template-columns:1fr 1fr}
 .future-inner{grid-template-columns:1fr;gap:20px}
}
@media(max-width:650px){
 .hero h1{font-size:clamp(4.45rem,15vw,6.15rem)}
 .selected-section .section-heading h2{font-size:4.4rem}
 .catalogue-grid{grid-template-columns:1fr;gap:18px}
 .catalogue-grid .project-card,.catalogue-grid .project-card.card-large{grid-column:auto}
 .catalogue-grid .project-card .visual,.catalogue-grid .project-card.card-large .visual{height:200px}
 .catalogue-grid .project-card h3,.catalogue-grid .project-card.card-large h3{font-size:2.35rem;min-height:0;margin-bottom:10px}
 .catalogue-grid .project-card .project-card-body>p,.catalogue-grid .project-card.card-large .project-card-body>p{min-height:0;margin-bottom:18px}
 .catalogue-grid .project-role,.catalogue-grid .project-card.card-large .project-role{min-height:0}
 .sites-preview{padding:65px 0}
 .sites-v4-heading h2{font-size:4.5rem}
 .sites-v4-grid{grid-template-columns:1fr}
 .web-photo,.web-metric{height:225px}
 .web-info h3{font-size:3rem}
 .competency-grid article{min-height:0}
 .competency-grid article h3{min-height:0}
 .future-section{padding:65px 0}
 .case-hero h1{font-size:clamp(3.6rem,13.1vw,5.4rem);overflow-wrap:anywhere}
 .case-hero-visual--phone{display:flex;justify-content:center}
 .case-device-shell{width:min(70vw,230px)}
 .case-gallery--phone{justify-content:center}
 .case-gallery--phone .case-shot{width:min(100%,305px)}
 .case-hero-visual--browser-left .case-frame{max-width:100%}
 .case-frame{border-radius:12px}
 .learning-item{padding:18px}
}
/* Final size pass: concise cards rather than towering panels. */
@media(min-width:1101px){
 .catalogue-grid .project-card .visual{height:173px}
 .catalogue-grid .project-card.card-large .visual{height:245px}
 .catalogue-grid .project-card .project-card-body{padding:18px 21px 20px}
 .catalogue-grid .project-card h3{font-size:clamp(1.75rem,2.25vw,2.12rem);min-height:1.98em;margin-bottom:9px}
 .catalogue-grid .project-card.card-large h3{font-size:clamp(2.15rem,2.85vw,2.7rem);min-height:1.04em}
 .catalogue-grid .project-card .project-card-body>p{font-size:.87rem;line-height:1.55;min-height:4.65em;margin-bottom:12px}
 .catalogue-grid .project-card.card-large .project-card-body>p{min-height:3.1em}
 .catalogue-grid .project-role{font-size:.79rem;min-height:79px;padding-top:11px}
 .catalogue-grid .project-card.card-large .project-role{min-height:61px}
 .catalogue-grid .text-arrow{margin-top:12px}
}
@media(max-width:650px){
 .catalogue-grid .project-card .visual,.catalogue-grid .project-card.card-large .visual{height:185px}
 .catalogue-grid .project-card .project-card-body{padding:18px 20px 20px}
 .catalogue-grid .project-card h3,.catalogue-grid .project-card.card-large h3{font-size:2.15rem}
 .catalogue-grid .project-card .project-card-body>p,.catalogue-grid .project-card.card-large .project-card-body>p{font-size:.9rem;line-height:1.55}
}

/* Case evidence: documented UX before/after + product governance */
.case-ux-history .case-gallery--comparison{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.case-ux-history .case-shot{min-width:0}
.case-ux-history .case-shot img{aspect-ratio:1132/706;object-fit:contain;object-position:center center;background:#eef0f3}
.case-ux-history .case-shot figcaption{min-height:4.8em}
.case-visual-caveat{margin-top:18px;font-size:.87rem!important;color:#9ba7bb!important;border-left:2px solid #6a90db;padding-left:14px}
.case-table-before{margin-top:30px;display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:24px}
.case-table-before .case-shot{margin:0}
.case-table-explain h3{font-size:clamp(1.6rem,2.4vw,2.2rem);margin:0 0 13px}
.case-history-list{margin:0 0 10px;padding-left:18px;color:#aeb6c1;line-height:1.65}
.case-history-list li{margin-bottom:8px}
.case-table-explain p{font-size:.92rem!important}
.doc-deliverables{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:25px 0}
.doc-deliverable{padding:19px 20px;border:1px solid #334151;border-radius:12px;background:#101923}
.doc-deliverable h3{font:600 1.17rem/1.25 'Inter Tight',sans-serif;letter-spacing:-.02em;margin:0 0 7px;color:#ebf0f7}
.doc-deliverable p{margin:0!important;font-size:.91rem!important;line-height:1.6!important}
@media (max-width:950px){.case-ux-history .case-gallery--comparison,.case-table-before{grid-template-columns:1fr}}
@media (max-width:600px){.doc-deliverables{grid-template-columns:1fr}.case-ux-history .case-shot figcaption{min-height:auto}}