/* 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); }
/* Mobile — cada projeto ocupa o palco inteiro, com prova legível nos dois formatos. */
.tr-card__cel { display:none; }
@media(max-width:760px) {
  .tr-hero { padding:132px 0 44px; background:radial-gradient(ellipse 110% 70% at 105% 6%,rgba(255,90,31,.2),transparent 70%),var(--carvao); }
  .tr-hero::after { font-size:41vw; bottom:-.16em; opacity:.55; }
  .tr-hero__grid { gap:26px; }
  .tr-hero h1 { font-size:clamp(4.2rem,17.8vw,8rem); max-width:8ch; line-height:.83; margin:25px 0 0; }
  .tr-hero h1 .serifa { display:block; font-size:1.22em; margin-top:3px; padding-bottom:.08em; }
  .tr-hero__aside { max-width:none; width:100%; padding:0; }
  .tr-hero__aside .lead { max-width:34ch; font-size:1.0625rem; line-height:1.55; margin:0 0 22px; }
  .tr-hero__aside > .btn { width:100%; justify-content:space-between; }
  .tr-tira { margin-top:27px; margin-bottom:0; padding:17px 0 0; gap:12px; font-size:.63rem; letter-spacing:.03em; line-height:1.5; }
  .tr-tira strong { font:760 2.2rem/.9 var(--f-display); letter-spacing:-.07em; color:var(--osso); }
  .tr-main { padding:58px 0 64px; }
  .tr-intro { gap:18px; margin-bottom:25px; }
  .tr-intro .t-1 { font-size:clamp(2.55rem,11vw,4.7rem); line-height:.94; margin-top:17px; max-width:13ch; }
  .tr-intro .lead { font-size:1rem; line-height:1.55; max-width:36ch; }
  .tr-filtros { padding:2px 0 19px; margin-bottom:18px; overflow:visible; }
  .tr-filtros__links,.tr-filtros__botoes { width:100%; flex-wrap:wrap; gap:7px; }
  .tr-filtros :is(a,button) { padding:0 14px; min-height:44px; font-size:.87rem; }
  .tr-filtros small { margin-left:7px; font-size:.64rem; }
  .tr-contagem { margin-bottom:18px; min-height:0; font-size:.64rem; }
  .tr-grade { gap:44px; }
  .tr-card { border-bottom:1px solid rgba(11,10,9,.16); padding-bottom:28px; }
  .tr-card__media { height:clamp(305px,92vw,480px); padding:65px 14px 0; border-radius:3px 26px 3px 3px; background:radial-gradient(ellipse at 15% 10%,var(--halo),transparent 80%),var(--tom); }
  .tr-card__media::after { content:''; position:absolute; inset:auto 0 0; height:22%; background:linear-gradient(transparent,rgba(0,0,0,.18)); pointer-events:none; }
  .tr-card__media > .nav-frame { width:91%; transform:rotate(-4deg); transform-origin:center; box-shadow:0 22px 40px #0005; }
  .tr-card:nth-child(even) .tr-card__media > .nav-frame { transform:rotate(3deg); }
  .tr-card__media .nav-frame__barra { height:24px; gap:4px; padding:0 9px; }
  .tr-card__media .nav-frame__barra i { width:5px; height:5px; }
  .tr-card__media .nav-frame__url { font-size:6px; margin-left:6px; }
  .tr-card__cel { display:block; position:absolute; z-index:1; width:39%; max-width:195px; right:8%; bottom:16px; transform:rotate(6deg); border-radius:17%/8%; padding:4px; background:#191715; box-shadow:0 14px 30px #0008,0 0 0 1px #ffffff33; }
  .tr-card:nth-child(even) .tr-card__cel { right:9%; transform:rotate(-4deg); }
  .tr-card__cel img { width:100%; height:auto; border-radius:14%/6.5%; }
  .tr-card__selo { top:18px; right:18px; font-size:.57rem; }
  .tr-card__meta { font-size:.61rem; letter-spacing:.06em; gap:8px; margin:21px 0 10px; line-height:1.5; }
  .tr-card__meta::before { width:18px; flex:none; }
  .tr-card__nome { font-size:clamp(1.9rem,8.2vw,3.3rem); letter-spacing:-.045em; gap:15px; align-items:flex-start; }
  .tr-card__nome span:last-child { width:42px; height:42px; font-size:1.25rem; margin-top:1px; }
  .tr-card__desc { font-size:1rem; margin-top:13px; line-height:1.55; }
  .tr-card__prova { display:flex; flex-wrap:wrap; font-size:.75rem; line-height:1.55; gap:0 5px; margin-top:13px; }
  .tr-produto { margin-top:52px; padding:30px 24px 25px; gap:30px; border-radius:3px 28px 3px 3px; }
  .tr-produto .olho { font-size:.61rem; }
  .tr-produto .t-2 { font-size:clamp(2.25rem,9vw,3.6rem); max-width:14ch; line-height:.98; }
  .tr-produto .lead { font-size:1rem; }
  .tr-produto .btn { width:100%; font-size:.86rem; padding-inline:15px; }
  .tr-produto__img { transform:none; width:calc(100% + 20px); margin-left:-10px; }
  .tr-produto__leg { font-size:.61rem; line-height:1.5; margin-inline:10px; }
  .tr-fecho { padding:70px 0; text-align:left; }
  .tr-fecho h2 { font-size:clamp(2.7rem,12vw,5rem); margin-inline:0; max-width:13ch; }
  .tr-fecho .lead { margin-inline:0; font-size:1.0625rem; }
  .tr-fecho .acoes .btn { width:100%; justify-content:space-between; font-size:.9rem; }
}
.tr-intro__movel { display:none; }
@media(max-width:760px) {
  .tr-intro__desktop { display:none; }
  .tr-intro__movel { display:inline; }
}