@font-face { font-family: 'TZ Portfolio'; src: url('../../themes/twentytwentytwo/assets/fonts/inter/Inter.ttf') format('truetype'); font-weight: 100 900; font-display: swap; }
.tz-portfolio { container-type: inline-size; max-width: 1536px; margin: 0 auto 40px; color: #073775; font-family: 'TZ Portfolio', Arial, sans-serif; }
.tz-portfolio__canvas { position: relative; isolation: isolate; overflow: hidden; padding: 2.8cqw 2.1cqw 3.6cqw; background: radial-gradient(ellipse at 25% 35%, #fff 10%, #f4fbfd 44%, #cef1fc 85%); }
.tz-portfolio svg { display: block; }
.tz-portfolio__definitions { position: absolute; }
.tz-portfolio__copy { position: relative; z-index: 3; width: 41.5%; padding-left: 1.55cqw; }
.tz-portfolio__eyebrow { display: flex; align-items: center; gap: 1cqw; margin: 0 0 .45cqw; font-size: 1cqw; letter-spacing: .42em; text-transform: uppercase; }
.tz-portfolio__eyebrow::before { content: ''; width: 3.7cqw; height: .28cqw; background: linear-gradient(90deg,#004389,#a3e5ee); }
.tz-portfolio .tz-portfolio__copy h2 { margin: 0; color: #053675; font-family: inherit; font-size: 5.85cqw; font-weight: 850; line-height: .88; letter-spacing: -.055em; }
.tz-portfolio__copy h2 span { display: inline-block; margin-top: .2cqw; color: #00a4d1; font-size: 1.03em; }
.tz-portfolio__subtitle { width: 112%; margin: .65cqw 0 1.35cqw; font-size: 1.57cqw; line-height: 1.25; letter-spacing: -.055em; }
.tz-portfolio__description { font-size: 1.36cqw; font-weight: 350; line-height: 1.26; letter-spacing: -.036em; }
.tz-portfolio__description::before { content: ''; display: block; width: 4.8cqw; height: .38cqw; margin-bottom: .85cqw; background: linear-gradient(90deg,#004389,#bdeef3); }
.tz-portfolio__description p { margin: 0 0 .9cqw; }
.tz-pj .tz-portfolio__stats { display: grid; grid-template-columns: .85fr 1.22fr 1fr; margin: 1.65cqw 0 1.45cqw; }
.tz-portfolio__stats li { display: flex; gap: .8cqw; align-items: flex-start; padding: 0 1cqw; border-left: 1px solid #94c5db; }
.tz-portfolio__stats li:first-child { border: 0; padding-left: 0; }
.tz-portfolio__stats li:last-child { padding-right: 0; }
.tz-portfolio__stats svg { width: 2.8cqw; height: 3.5cqw; flex: 0 0 auto; }
.tz-portfolio__stats strong { display: block; font-size: 2.05cqw; line-height: 1; letter-spacing: -.04em; }
.tz-portfolio__stats span { display: block; margin-top: .2cqw; font-size: .94cqw; line-height: 1.3; letter-spacing: -.04em; }
.tz-portfolio__actions { display: flex; align-items: center; gap: 1.7cqw; }
.tz-portfolio__button { display: flex; justify-content: center; align-items: center; gap: .6cqw; width: 16.6cqw; min-height: 3.45cqw; flex-shrink: 0; border-radius: .9cqw; background: #045698; color: #fff !important; font-size: 1.55cqw; font-weight: 750; text-decoration: none !important; box-shadow: 0 10px 25px #037cb21c; }
.tz-portfolio__button span { font-size: 1.3em; line-height: 1; }
.tz-portfolio__button:hover { background: #007eb6; }
.tz-portfolio__pdf { display: flex; align-items: center; gap: 1cqw; color: #0064b8 !important; font-size: .97cqw; line-height: 1.25; text-decoration: none !important; }
.tz-portfolio__pdf-icon { position: relative; width: 2.9cqw; flex-shrink: 0; }
.tz-portfolio__pdf-icon svg { width: 100%; }
.tz-portfolio__pdf-icon svg path { fill: #f3fcff; }
.tz-portfolio__pdf-icon b { position: absolute; left: 30%; top: 44%; font-size: .7cqw; background: #f3fcff; }
.tz-portfolio a:focus-visible { outline: 3px solid #008abd; outline-offset: 5px; }
.tz-portfolio__scene { position: absolute; top: 0; left: 36%; width: 55%; height: 46cqw; background: linear-gradient(120deg,#afe8ef,#00a2d6 65%,#68cde2); clip-path: url(#tz-portfolio-scene-clip); z-index: 0; }
.tz-portfolio__house { position: absolute; top: 0; left: 3%; width: 96%; height: 32cqw; clip-path: url(#tz-portfolio-house-clip); }
.tz-portfolio__brand { position: absolute; right: 1.7%; top: 1.7cqw; width: 12%; text-align: center; z-index: 2; }
.tz-portfolio__logo { width: 100%; aspect-ratio: 182 / 160; mix-blend-mode: multiply; }
.tz-portfolio__script { margin: 2cqw 0 0; color: #0055a0; font-family: 'Segoe Print', 'Comic Sans MS', cursive; font-size: 1.9cqw; font-weight: 600; line-height: 1.28; font-style: italic; transform: rotate(-8deg); }
.tz-portfolio__script::after { content: ''; display: block; width: 75%; height: .9cqw; margin: .45cqw 0 0 auto; border-top: .2cqw solid #008dcc; border-radius: 50%; transform: rotate(-8deg); }
.tz-pj .tz-portfolio__areas { position: absolute; top: 29.6cqw; left: 42.8%; right: 3%; z-index: 3; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: .65cqw; }
.tz-portfolio__area { overflow: hidden; border: .2cqw solid white; border-radius: 1.4cqw; background: #007764; box-shadow: 0 .5cqw 1.2cqw #00354d33; }
.tz-portfolio__area > svg { width: 100%; height: 9.85cqw; }
.tz-portfolio__area > div { display: flex; align-items: center; min-height: 4.8cqw; padding: .25cqw .75cqw; gap: .85cqw; background: linear-gradient(115deg,#008658,#006d85); }
.tz-portfolio__area--formacao > div { background: linear-gradient(115deg,#035aa2,#004f80); }
.tz-portfolio__area--cultura > div { background: linear-gradient(110deg,#e6a100,#567b24); }
.tz-portfolio__area-icon { display: grid; place-items: center; border-radius: 50%; width: 4.25cqw; height: 4.25cqw; flex-shrink: 0; background: #fff; color: #66ac22; }
.tz-portfolio__area-icon svg { width: 2.8cqw; height: 2.9cqw; }
.tz-portfolio__area--formacao .tz-portfolio__area-icon { color: #004b8f; }
.tz-portfolio__area--cultura .tz-portfolio__area-icon { color: #edab00; }
.tz-portfolio .tz-portfolio__area h3 { color: #fff; font-family: inherit; margin: 0; font-size: 1.12cqw; font-weight: 650; line-height: 1.4; text-transform: uppercase; letter-spacing: -.05em; }
.tz-portfolio__waves { position: absolute; z-index: 1; width: 100%; pointer-events: none; }
.tz-portfolio__waves--middle { left: 0; top: 25cqw; height: 27cqw; }
.tz-portfolio__timeline { position: relative; z-index: 2; display: grid; grid-template-columns: 18.5% 1fr 12%; gap: 1cqw; align-items: start; min-height: 12.7cqw; padding: 1.45cqw 1.6cqw 1.8cqw 3.4cqw; margin-top: 1.5cqw; background: #f6fdffdc; border: 1px solid #fff; border-radius: 2.2cqw; }
.tz-portfolio__timeline-intro { position: relative; }
.tz-portfolio__timeline-intro::before { content: ''; position: absolute; left: -1.4cqw; top: 0; width: .35cqw; height: 5.1cqw; border-radius: 2px; background: #00ace2; }
.tz-portfolio__timeline-intro p { margin: 0 0 .2cqw; font-size: .92cqw; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.tz-portfolio .tz-portfolio__timeline-intro h3 { margin: 0 0 .6cqw; color: #09437f; font-family: inherit; font-size: 1.9cqw; font-weight: 750; line-height: .96; letter-spacing: -.05em; }
.tz-portfolio__timeline-intro > span { display: block; font-size: .94cqw; line-height: 1.35; letter-spacing: -.035em; }
.tz-portfolio__years { position: relative; padding-top: .3cqw; }
.tz-portfolio__years > svg { position: absolute; left: 0; top: 5.5cqw; width: 100%; height: 3.3cqw; }
.tz-portfolio__years ol { position: relative; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(8,1fr); gap: .8cqw; }
.tz-portfolio__years li { display: flex; flex-direction: column; align-items: center; }
.tz-portfolio__years li:nth-child(odd) { padding-top: .5cqw; }
.tz-portfolio__years li > span { display: grid; place-content: center; text-align: center; width: 5.35cqw; height: 5.35cqw; border-radius: 50%; background: var(--year-color); color: white; font-size: 1.18cqw; line-height: 1.25; box-shadow: 0 .5cqw .7cqw #00577e25, inset 0 0 0 1px #ffffff55; }
.tz-portfolio__years i { position: relative; display: block; margin-top: -.2cqw; width: 1.75cqw; height: 1.75cqw; border: .24cqw solid white; border-radius: 50%; background: var(--year-color); }
.tz-portfolio__years i::after { content: ''; position: absolute; inset: 30%; background: white; border-radius: 50%; }
.tz-portfolio__closing { margin: 0; font-size: 1.3cqw; text-align: center; white-space: nowrap; }
.tz-portfolio__waves--bottom { bottom: 0; left: 0; height: 6cqw; z-index: 4; }
@media (max-width: 767px) {
    .tz-portfolio { margin-bottom: 24px; }
    .tz-portfolio__canvas { padding: 26px 20px 50px; }
    .tz-portfolio__copy { width: 100%; padding: 0; }
    .tz-portfolio__eyebrow { font-size: 10px; gap: 10px; margin-bottom: 12px; }
    .tz-portfolio__eyebrow::before { width: 30px; height: 3px; }
    .tz-portfolio .tz-portfolio__copy h2 { font-size: 12cqw; }
    .tz-portfolio__subtitle { width: 100%; max-width: 80%; margin: 12px 0 22px; font-size: 16px; letter-spacing: -.04em; }
    .tz-portfolio__description { font-size: 16px; line-height: 1.45; letter-spacing: -.025em; }
    .tz-portfolio__description::before { width: 60px; height: 4px; margin-bottom: 14px; }
    .tz-portfolio__description p { margin-bottom: 14px; }
    .tz-portfolio__brand { top: 30px; right: 16px; width: 19%; }
    .tz-portfolio__brand .tz-portfolio__script { display: none; }
    .tz-pj .tz-portfolio__stats { margin: 24px 0; gap: 6px; }
    .tz-portfolio__stats li { flex-direction: column; padding: 0 5px; gap: 5px; }
    .tz-portfolio__stats svg { width: 22px; height: 29px; }
    .tz-portfolio__stats strong { font-size: 24px; }
    .tz-portfolio__stats span { font-size: 10px; }
    .tz-portfolio__actions { gap: 16px; }
    .tz-portfolio__button { width: 45%; min-height: 48px; font-size: 18px; border-radius: 9px; }
    .tz-portfolio__pdf { font-size: 11px; gap: 7px; }
    .tz-portfolio__pdf-icon { width: 28px; }
    .tz-portfolio__pdf-icon b { font-size: 7px; }
    .tz-portfolio__scene { position: relative; left: auto; width: calc(100% + 40px); margin: 0 -20px; height: 56cqw; top: auto; order: 2; }
    .tz-portfolio__house { height: 56cqw; }
    .tz-portfolio__canvas { display: flex; flex-direction: column; }
    .tz-portfolio__copy { order: 1; margin-bottom: 24px; }
    .tz-pj .tz-portfolio__areas { position: relative; top: auto; left: auto; right: auto; order: 3; margin: -12px -6px 24px; gap: 6px; }
    .tz-portfolio__area { border-width: 2px; border-radius: 12px; }
    .tz-portfolio__area > svg { height: 22cqw; }
    .tz-portfolio__area > div { min-height: 62px; flex-direction: column; gap: 4px; padding: 6px 3px; text-align: center; }
    .tz-portfolio__area-icon { width: 28px; height: 28px; }
    .tz-portfolio__area-icon svg { width: 21px; height: 22px; }
    .tz-portfolio .tz-portfolio__area h3 { font-size: 10px; letter-spacing: -.03em; }
    .tz-portfolio__waves--middle { top: auto; bottom: 250px; height: 240px; }
    .tz-portfolio__timeline { order: 4; grid-template-columns: 1fr; margin: 0; padding: 20px; gap: 20px; border-radius: 20px; }
    .tz-portfolio__timeline-intro { padding-left: 12px; }
    .tz-portfolio__timeline-intro::before { left: 0; width: 3px; height: 54px; }
    .tz-portfolio__timeline-intro p { font-size: 11px; }
    .tz-portfolio .tz-portfolio__timeline-intro h3 { font-size: 25px; margin: 5px 0 10px; }
    .tz-portfolio__timeline-intro > span { font-size: 13px; }
    .tz-portfolio__years ol { grid-template-columns: repeat(4,1fr); gap: 14px 6px; }
    .tz-portfolio__years li:nth-child(odd) { padding: 0; }
    .tz-portfolio__years li > span { width: 52px; height: 52px; font-size: 13px; }
    .tz-portfolio__years i { width: 17px; height: 17px; border-width: 3px; margin-top: -2px; }
    .tz-portfolio__years > svg { display: none; }
    .tz-portfolio__closing { font-size: 20px; white-space: normal; }
    .tz-portfolio__closing br { display: none; }
    .tz-portfolio__closing::after { height: 10px; width: 90px; border-width: 2px; }
    .tz-portfolio__waves--bottom { height: 40px; }
}