/* Feitaz — vitrine. Mural editorial, não catálogo de miniaturas. */
.tr-hero { position:relative; padding:clamp(162px,18vw,275px) 0 100px; overflow:hidden; background:radial-gradient(ellipse 55% 65% at 94% 28%,rgba(255,90,31,.22),transparent),var(--carvao); }
.tr-hero::after { content:'TRABALHOS'; position:absolute; bottom:-.22em; right:-.04em; font:900 clamp(8rem,20vw,23rem)/1 var(--f-display); font-stretch:125%; letter-spacing:-.09em; color:rgba(244,239,230,.035); pointer-events:none; }
.tr-hero__grid { position:relative; z-index:1; display:grid; grid-template-columns:1.2fr .8fr; align-items:end; gap:36px; }
.tr-hero h1 { max-width:11ch; margin:22px 0 34px; font-size:clamp(4rem,9vw,9.8rem); }
.tr-hero__aside { padding-bottom:10px; max-width:420px; justify-self:end; }
.tr-hero__aside .lead { margin-bottom:26px; }
.tr-tira { display:flex; gap:16px; align-items:center; padding:18px 0; border-top:1px solid var(--linha-2); font:500 .72rem var(--f-mono); letter-spacing:.07em; color:var(--cinza); text-transform:uppercase; }
.tr-tira strong { color:var(--osso); font-size:1rem; }
.tr-main { background:var(--osso); color:var(--tinta); color-scheme:light; padding:clamp(72px,9vw,140px) 0; }
.tr-intro { display:grid; grid-template-columns:1fr 1fr; gap:32px; align-items:end; margin-bottom:42px; }
.tr-intro .t-1 { max-width:12ch; font-size:clamp(2.8rem,5.7vw,6.4rem); }
.tr-intro .lead { color:var(--cinza-2); max-width:40ch; justify-self:end; }
.tr-filtros { overflow-x:auto; padding:4px 0 20px; margin-bottom:34px; border-bottom:1px solid rgba(11,10,9,.18); scrollbar-width:thin; }
.tr-filtros__links,.tr-filtros__botoes { display:flex; gap:8px; width:max-content; }
.tr-filtros__botoes,.js .tr-filtros__links { display:none; }
.js .tr-filtros__botoes { display:flex; }
.tr-filtros a,.tr-filtros button { display:inline-flex; flex:none; align-items:center; min-height:46px; padding:0 20px; border:1px solid rgba(11,10,9,.2); border-radius:50px; background:transparent; color:var(--tinta); text-decoration:none; font-weight:680; transition:background .3s,color .3s,transform .3s; }
.tr-filtros a:hover,.tr-filtros button:hover,.tr-filtros button[aria-pressed="true"] { background:var(--tinta); color:var(--osso); }
.tr-filtros a:active,.tr-filtros button:active { transform:scale(.96); }
.tr-filtros small { margin-left:9px; font:500 .7rem var(--f-mono); opacity:.7; }
.tr-filtro-alvo { display:block; height:0; scroll-margin-top:120px; }
.tr-contagem { min-height:28px; color:var(--cinza-2); font:500 .7rem var(--f-mono); text-transform:uppercase; letter-spacing:.1em; margin-bottom:20px; }
.tr-contagem span:not(.tr-contagem__todos) { display:none; }
.tr-main:has(#f-sites:target) .tr-card:not([data-tipos~="sites"]),
.tr-main:has(#f-marca:target) .tr-card:not([data-tipos~="marca"]),
.tr-main:has(#f-sistemas:target) .tr-card:not([data-tipos~="sistemas"]),
.tr-main:has(#f-ia:target) .tr-card:not([data-tipos~="ia"]),
.tr-main:has(#f-imagem:target) .tr-card:not([data-tipos~="imagem"]) { display:none; }
.tr-main:has(.tr-filtro-alvo:not(#f-todos):target) .tr-contagem__todos { display:none; }
.tr-main:has(#f-sites:target) .tr-contagem__sites,.tr-main:has(#f-marca:target) .tr-contagem__marca,
.tr-main:has(#f-sistemas:target) .tr-contagem__sistemas,.tr-main:has(#f-ia:target) .tr-contagem__ia,
.tr-main:has(#f-imagem:target) .tr-contagem__imagem { display:inline; }
.tr-main:has(#f-sites:target) a[href="#f-sites"],.tr-main:has(#f-marca:target) a[href="#f-marca"],
.tr-main:has(#f-sistemas:target) a[href="#f-sistemas"],.tr-main:has(#f-ia:target) a[href="#f-ia"],
.tr-main:has(#f-imagem:target) a[href="#f-imagem"] { background:var(--tinta); color:var(--osso); }
.tr-grade { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(18px,3vw,42px); align-items:start; }
.tr-card { min-width:0; scroll-margin-top:110px; }
.tr-card:nth-child(4n+2),.tr-card:nth-child(4n+3) { transform:translateY(55px); }
.tr-grade[data-filtrando] .tr-card { transform:none; }
@media (prefers-reduced-motion:no-preference) {
  ::view-transition-old(root) { animation:tr-sai .22s ease both; }
  ::view-transition-new(root) { animation:tr-entra .42s var(--ease) both; }
  @keyframes tr-sai { to { opacity:0; transform:translateY(-8px); } }
  @keyframes tr-entra { from { opacity:0; transform:translateY(12px); } }
}
.tr-card[hidden] { display:none; }
.tr-card__link { display:block; text-decoration:none; }
.tr-card__media { position:relative; overflow:hidden; padding:clamp(22px,3vw,54px) clamp(18px,2.8vw,48px) 0; height:clamp(305px,36vw,525px); border-radius:4px; background:var(--tom,#252522); isolation:isolate; }
.tr-card__media::before { content:''; position:absolute; inset:-25%; background:radial-gradient(ellipse at 70% 15%,var(--halo,rgba(255,255,255,.16)),transparent 57%); pointer-events:none; }
.tr-card__media .nav-frame { position:relative; transform:rotate(-3deg) translateY(18px); transform-origin:50% 100%; transition:transform .75s var(--ease),box-shadow .6s; }
.tr-card:nth-child(even) .nav-frame { transform:rotate(3deg) translateY(18px); }
.tr-card__link:hover .nav-frame,.tr-card__link:focus-visible .nav-frame { transform:rotate(0) translateY(0) scale(1.025); }
.tr-card .nav-frame__tela { overflow:hidden; }
.tr-card [data-rola] picture { display:block; }
.tr-card [data-rola] img { display:block; height:auto; max-width:none; width:100%; object-fit:unset; transform:translateY(0); transition:transform var(--rola-dur,7s) linear; }
.tr-card__link:hover [data-rola] img,.tr-card__link:focus-visible [data-rola] img { transform:translateY(var(--rola,0px)); }
.tr-card__selo { position:absolute; z-index:2; top:18px; right:18px; }
.tr-card__meta { display:flex; align-items:center; gap:12px; margin:20px 0 8px; color:var(--cinza-2); font:.68rem var(--f-mono); letter-spacing:.1em; text-transform:uppercase; }
.tr-card__meta::before { content:''; width:26px; height:1px; background:var(--brasa-escura); }
.tr-card__nome { display:flex; justify-content:space-between; align-items:center; gap:16px; font-size:clamp(1.65rem,2.6vw,2.8rem); line-height:1.1; letter-spacing:-.04em; font-weight:790; font-stretch:112%; }
.tr-card__nome span:last-child { flex:none; display:grid; place-items:center; width:48px; height:48px; border:1px solid rgba(11,10,9,.2); border-radius:50%; font-size:1.3rem; transition:transform .35s,background .35s,color .35s; }
.tr-card__link:hover .tr-card__nome span:last-child { transform:rotate(-45deg); background:var(--tinta); color:var(--osso); }
.tr-card__desc { max-width:51ch; color:var(--cinza-2); font-size:1rem; line-height:1.5; margin-top:10px; }
.tr-card__prova { display:inline-flex; align-items:center; min-height:44px; margin-top:8px; color:var(--brasa-escura); font-size:.82rem; font-weight:760; gap:6px; }
.tr-produto { margin-top:clamp(90px,12vw,175px); display:grid; grid-template-columns:1fr 1fr; gap:clamp(26px,5vw,80px); align-items:center; padding:clamp(32px,6vw,85px); background:var(--carvao); color:var(--osso); border-radius:var(--r-xl); overflow:hidden; }
.tr-produto .t-2 { margin:15px 0 20px; max-width:12ch; }
.tr-produto .lead { margin-bottom:28px; }
.tr-produto__img { position:relative; transform:rotate(3deg); }
.tr-produto__img img { width:100%; border-radius:12px; box-shadow:0 30px 80px rgba(0,0,0,.5); }
.tr-produto__leg { color:var(--cinza); font:.7rem var(--f-mono); margin-top:12px; }
.tr-fecho { padding:clamp(90px,10vw,140px) 0; text-align:center; background:radial-gradient(circle at 50% 100%,rgba(255,90,31,.2),transparent 50%),var(--carvao); }
.tr-fecho h2 { margin:18px auto 22px; max-width:16ch; }
.tr-fecho .lead,.tr-fecho .acoes { margin-inline:auto; justify-content:center; }
.tr-fecho .acoes { margin-top:28px; }
@media(max-width:760px) { .tr-hero { padding:135px 0 68px; } .tr-hero__grid,.tr-intro,.tr-produto { grid-template-columns:1fr; } .tr-hero h1 { font-size:clamp(3.7rem,12vw,6rem); margin-bottom:22px; } .tr-hero__aside { justify-self:start; } .tr-grade { grid-template-columns:1fr; gap:54px; } .tr-card:nth-child(n) { transform:none; } .tr-card__media { height:clamp(285px,80vw,450px); } .tr-card__media .nav-frame { transform:rotate(-2deg) translateY(14px); } .tr-card__nome { font-size:clamp(1.7rem,7vw,2.5rem); } .tr-intro .lead { justify-self:start; } .tr-produto { border-radius:24px; } }
@media(max-width:390px) { .tr-card__media { padding:44px 14px 0; } .tr-card__nome { font-size:1.75rem; } }
@media(prefers-reduced-motion:reduce) { .tr-card .nav-frame,.tr-card [data-rola] img,.tr-card__nome span:last-child { transition:none!important; } .tr-card__link:hover [data-rola] img { transform:none; } }

/* contraste AA: olho da introdução sobre o osso */
.tr-intro .olho { color: var(--brasa-escura); }
.tr-intro .olho::before { background: var(--brasa-escura); }