#marcas { padding-block:clamp(64px,6vw,94px); }
#marcas [hidden] { display:none!important; }
.portfolio-heading { display:grid; grid-template-columns:1.4fr 1fr; gap:clamp(35px,7vw,95px); align-items:end; }
.portfolio-heading .brands-kicker { margin-bottom:17px; }
.portfolio-heading h2 { max-width:770px; margin:0; font:400 clamp(2.8rem,4.5vw,4.8rem)/1.04 Georgia,'Times New Roman',serif; letter-spacing:-.045em; text-wrap:balance; }
.portfolio-heading>p { max-width:365px; margin:0 0 4px; font-size:.98rem; line-height:1.7; color:#59616a; }
.portfolio-explorer { margin-top:clamp(32px,4vw,54px); }
.portfolio-panels { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:26px; }
.portfolio-panel { min-width:0; background:#f1ede6; border:1px solid #c6beb1; }
.portfolio-panel-brand { display:flex; align-items:center; justify-content:space-between; gap:22px; min-height:107px; padding:18px 25px; }
.portfolio-panel-brand>span:last-child { max-width:135px; color:#61656a; font-size:.78rem; line-height:1.5; text-align:right; }
.portfolio-photo { display:block; margin:0; background:#d4ccbf; }
.portfolio-photo img { display:block; width:100%; height:auto; }
.portfolio-panel-copy { padding:24px 28px 26px; }
.portfolio-panel-copy h3 { margin:0; color:#0a1925; font:400 1.85rem/1.15 Georgia,'Times New Roman',serif; letter-spacing:-.025em; }
.portfolio-panel-copy>p { max-width:470px; margin:12px 0 15px; color:#59616a; font-size:.87rem; line-height:1.65; }
.portfolio-card-link { display:inline-flex; align-items:center; gap:21px; min-height:44px; color:#684b21; font-size:.73rem; line-height:1.5; font-weight:700; text-decoration:underline; text-underline-offset:6px; }
.portfolio-card-link:hover { color:#0a1925; }
.portfolio-logo { position:relative; display:block; flex:none; width:var(--logo-size); max-width:100%; aspect-ratio:var(--logo-ratio); overflow:hidden; mix-blend-mode:multiply; }
.portfolio-logo img { position:absolute; display:block; left:var(--logo-x); top:var(--logo-y); width:var(--logo-image-size); max-width:none; height:auto; }
.portfolio-logo--olenka { --logo-size:160px; --logo-ratio:681/156; --logo-image-size:108.81%; --logo-x:-4.85%; --logo-y:-19.87%; }
.portfolio-logo--mup { --logo-size:135px; --logo-ratio:927/419; --logo-image-size:110.46%; --logo-x:-5.72%; --logo-y:-5.01%; }
.portfolio-logo--doha { --logo-size:140px; --logo-ratio:361/76; --logo-image-size:123.82%; --logo-x:-11.91%; --logo-y:-243.42%; }
.portfolio-logo--glynett { --logo-size:140px; --logo-ratio:342/215; --logo-image-size:122.81%; --logo-x:-10.53%; --logo-y:-46.51%; }
.portfolio-logo--spa-do-fio { --logo-size:54px; --logo-ratio:268/420; --logo-image-size:251.87%; --logo-x:-76.12%; --logo-y:-25.95%; }
.portfolio-logo--papel-mechas { --logo-size:150px; --logo-ratio:1315/523; --logo-image-size:101.37%; --logo-x:-.68%; --logo-y:-79.92%; }
.portfolio-options { display:grid; align-content:stretch; border:1px solid #c6beb1; border-left:0; background:#e9e2d7; }
.portfolio-option { position:relative; display:grid; grid-template-columns:minmax(160px,.85fr) minmax(120px,1.15fr) 18px; align-items:center; gap:22px; min-height:104px; padding:18px clamp(22px,2.5vw,38px); border-bottom:1px solid #c6beb1; color:#0a1925; transition:background .2s; }
.portfolio-option:last-child { border-bottom:0; }
.portfolio-option::before { position:absolute; inset:0 auto 0 0; content:''; width:3px; background:#9b7639; transform:scaleY(0); transition:transform .2s; }
.portfolio-option>small { color:#61656a; font-size:.79rem; line-height:1.5; }
.portfolio-option>i { color:#84632f; font-size:1rem; font-style:normal; }
.portfolio-option:hover,.portfolio-option:focus-visible,.portfolio-option.is-active { background:#f4f0e8; }
.portfolio-option:hover::before,.portfolio-option:focus-visible::before,.portfolio-option.is-active::before { transform:scaleY(1); }
.portfolio-card-link:focus-visible,.portfolio-option:focus-visible { outline:3px solid #906a32; outline-offset:-4px; }
.portfolio-status,.portfolio-selection-note { position:absolute; width:1px; height:1px; padding:0; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
@media(min-width:901px) {
 .portfolio-explorer.is-enhanced { display:grid; grid-template-columns:minmax(0,1.04fr) minmax(0,1fr); }
 .is-enhanced .portfolio-panels { display:block; }
 .is-enhanced .portfolio-panel-brand { display:none; }
 .is-enhanced .portfolio-panel { height:100%; }
 .is-enhanced .portfolio-panel.is-active { animation:portfolio-entry .25s ease-out; }
}
@keyframes portfolio-entry { from { opacity:.35; } to { opacity:1; } }
@media(min-width:901px) and (max-width:1200px) {
 .portfolio-option { grid-template-columns:minmax(0,.85fr) minmax(0,1fr) 14px; gap:14px; min-height:86px; padding:15px 18px; }
 .portfolio-option>small { font-size:.73rem; }
 .portfolio-logo--spa-do-fio { --logo-size:40px; }
 .portfolio-options .portfolio-logo--glynett { --logo-size:95px; }
 .portfolio-options .portfolio-logo--olenka { --logo-size:135px; }
 .portfolio-options .portfolio-logo--mup { --logo-size:105px; }
}
@media(max-width:900px) {
 .portfolio-heading { grid-template-columns:1fr; gap:22px; }
 .portfolio-heading h2 { max-width:700px; font-size:clamp(2.6rem,7vw,4rem); }
 .portfolio-heading>p { max-width:570px; font-size:.93rem; }
 .portfolio-explorer { margin-top:30px; }
 .portfolio-panels { grid-template-columns:1fr; gap:30px; }
 .portfolio-panel { width:min(100%,560px); margin-inline:auto; }
 .portfolio-panel-copy { padding:18px 22px 22px; }
 .portfolio-panel-copy h3 { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
 .portfolio-panel-copy>p { margin:0 0 8px; font-size:.86rem; }
}
@media(max-width:400px) {
 .portfolio-panel-brand { padding-inline:18px; gap:16px; }
 .portfolio-panel-brand>span:last-child { max-width:104px; font-size:.73rem; }
 .portfolio-logo--olenka { --logo-size:135px; }
 .portfolio-logo--mup,.portfolio-logo--doha { --logo-size:120px; }
 .portfolio-logo--glynett { --logo-size:120px; }
 .portfolio-logo--papel-mechas { --logo-size:130px; }
}
@media(prefers-reduced-motion:reduce) {
 .portfolio-option,.portfolio-option::before { transition:none; }
 .is-enhanced .portfolio-panel.is-active { animation:none; }
}