/* Urbano: pôster de rua. Big Shoulders condensada enorme + Archivo, preto com uma cor de sinalização. */
.m-urbano body { font: 400 17px/1.55 "Archivo", system-ui, sans-serif; }
.m-urbano h1, .m-urbano h2, .m-urbano h3 { font-family: "Big Shoulders", Impact, sans-serif; font-weight: 900; text-transform: uppercase; line-height: .88; letter-spacing: -.005em; }

.ur-topo { position: sticky; top: 0; z-index: 50; display: flex; align-items: center; gap: 28px; padding: 12px max(20px, env(safe-area-inset-left)); background: var(--fundo); transition: box-shadow .2s; }
.ur-topo.rolou { box-shadow: 0 1px 0 color-mix(in srgb, var(--tinta) 14%, transparent); }
.ur-marca { font: 800 24px/1 "Big Shoulders", Impact, sans-serif; text-transform: uppercase; text-decoration: none; letter-spacing: .01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ur-nav { display: flex; gap: 26px; margin-left: auto; }
.ur-nav a { text-decoration: none; font: 700 15px/1 "Archivo", sans-serif; font-stretch: 85%; text-transform: uppercase; letter-spacing: .04em; opacity: .75; }
.ur-nav a:hover { opacity: 1; color: var(--acento); }
.ur-btn { white-space: nowrap; display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 28px; background: var(--acento); color: var(--sobre-acento); text-decoration: none;
  font: 800 19px/1 "Big Shoulders", Impact, sans-serif; text-transform: uppercase; letter-spacing: .04em; border-radius: 0; transition: transform .12s, box-shadow .12s; }
.ur-btn:hover { transform: translate(-3px, -3px); box-shadow: 3px 3px 0 var(--tinta); }
.ur-btn-topo { min-height: 40px; padding: 0 18px; font-size: 17px; }
.ur-btn-linha { background: transparent; color: var(--tinta); box-shadow: inset 0 0 0 2px var(--tinta); }
.ur-btn-linha:hover { box-shadow: inset 0 0 0 2px var(--tinta), 3px 3px 0 var(--acento); }
.ur-btn-escuro { background: var(--fundo); color: var(--tinta); }

.ur-hero { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); align-items: end; padding: clamp(32px, 5vw, 64px) 20px 56px; max-width: 1400px; margin: 0 auto; }
.ur-nome { font-size: clamp(64px, 11.5vw, 188px); overflow-wrap: break-word; hyphens: manual; }
.ur-nome.longo { font-size: clamp(54px, 8.6vw, 140px); }
.ur-chamada { font-size: clamp(18px, 1.9vw, 22px); font-stretch: 90%; max-width: 36ch; margin-top: 22px; opacity: .85; }
.ur-acoes { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.ur-nota { display: flex; align-items: center; gap: 10px; margin-top: 24px; font-size: 14px; }
.ur-nota b { font: 900 34px/1 "Big Shoulders", sans-serif; }
.ur-nota span:last-child { opacity: .6; }
.ur-hero-foto { position: relative; aspect-ratio: 4 / 5; box-shadow: 14px 14px 0 var(--acento); margin-right: 14px; }
.ur-hero-foto img { width: 100%; height: 100%; object-fit: cover; filter: contrast(1.08); }
.ur-hero-foto.sem-foto { display: grid; place-items: center; overflow: hidden;
  background: repeating-linear-gradient(-45deg, var(--papel) 0 14px, color-mix(in srgb, var(--papel) 70%, var(--fundo)) 14px 28px); }
.ur-hero-foto.sem-foto span { font: 900 clamp(150px, 22vw, 340px)/.8 "Big Shoulders", sans-serif; color: transparent; -webkit-text-stroke: 2px var(--acento); text-transform: uppercase; }

/* faixa contínua de serviços */
.ur-faixa { overflow: hidden; background: var(--acento); color: var(--sobre-acento); padding: 14px 0; }
.ur-faixa > div { display: flex; width: max-content; animation: ur-rolar 38s linear infinite; }
.ur-faixa span { font: 900 30px/1 "Big Shoulders", sans-serif; text-transform: uppercase; white-space: nowrap; padding: 0 26px; }
.ur-faixa span::after { content: "/"; margin-left: 52px; opacity: .45; }
@keyframes ur-rolar { to { transform: translateX(-50%); } }

.ur-titulo { display: flex; align-items: baseline; gap: 14px; font-size: clamp(56px, 8vw, 120px); margin-bottom: 36px; }
.ur-titulo small { font: 700 15px/1 "Archivo", sans-serif; letter-spacing: .02em; text-transform: none; color: var(--acento); }

.ur-servicos { padding: 96px 20px; max-width: 1400px; margin: 0 auto; }
.ur-cat { margin-bottom: 44px; }
.ur-cat h3 { font-size: 24px; color: var(--acento); margin-bottom: 8px; }
.ur-cat li a { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 260px) auto; gap: 24px; align-items: center; padding: 18px 14px; text-decoration: none;
  border-top: 1px solid color-mix(in srgb, var(--tinta) 16%, transparent); transition: background .12s, color .12s; }
.ur-cat li:last-child a { border-bottom: 1px solid color-mix(in srgb, var(--tinta) 16%, transparent); }
.ur-cat li a:hover { background: var(--acento); color: var(--sobre-acento); }
.ur-s-nome { font: 800 clamp(26px, 3vw, 40px)/1 "Big Shoulders", sans-serif; text-transform: uppercase; }
.ur-s-info { font-size: 14px; opacity: .65; font-stretch: 90%; }
.ur-s-preco { font: 900 clamp(26px, 3vw, 40px)/1 "Big Shoulders", sans-serif; font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--acento); }
.ur-cat li a:hover .ur-s-preco { color: inherit; }

.ur-sobre { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 56px; align-items: center; padding: 96px 20px; max-width: 1400px; margin: 0 auto; border-top: 2px solid var(--tinta); }
.ur-sobre-texto p { max-width: 56ch; margin-bottom: 14px; opacity: .85; }
.ur-sobre-texto p:first-of-type { font-size: clamp(22px, 2.4vw, 30px); line-height: 1.3; font-stretch: 85%; font-weight: 600; opacity: 1; }
.ur-sobre.sem-foto { grid-template-columns: 1fr; }
.ur-sobre.sem-foto .ur-sobre-texto p { max-width: 70ch; }
.ur-sobre-foto { aspect-ratio: 1; }
.ur-sobre-foto img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.1); }

.ur-galeria { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 22vw; gap: 4px; }
.ur-galeria figure:first-child { grid-column: span 2; grid-row: span 2; }
.ur-galeria img { width: 100%; height: 100%; object-fit: cover; }

.ur-equipe { padding: 96px 20px; max-width: 1400px; margin: 0 auto; }
.ur-equipe ul { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 20px; }
.ur-foto-pessoa { aspect-ratio: 3 / 4; background: var(--papel); overflow: hidden; }
.ur-foto-pessoa img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1); transition: filter .25s; }
.ur-equipe li:hover img { filter: none; }
.ur-foto-pessoa span { display: grid; place-items: center; height: 100%; font: 900 96px/1 "Big Shoulders", sans-serif; color: transparent; -webkit-text-stroke: 2px var(--acento); }
.ur-equipe b { display: block; margin-top: 12px; font: 800 28px/1 "Big Shoulders", sans-serif; text-transform: uppercase; }
.ur-equipe small { font-size: 14px; opacity: .6; }

.ur-depo { padding: 96px 20px; background: var(--papel); }
.ur-depo .ur-titulo { max-width: 1400px; margin: 0 auto 36px; }
.ur-depo-lista { display: flex; flex-wrap: wrap; gap: 16px; max-width: 1400px; margin: 0 auto; }
.ur-depo blockquote { flex: 1 1 300px; max-width: 460px; }
.ur-depo blockquote { padding: 26px; background: var(--fundo); border-left: 4px solid var(--acento); }
.ur-depo blockquote p { font-size: 20px; line-height: 1.35; font-stretch: 90%; font-weight: 600; }
.ur-depo footer { display: flex; gap: 10px; align-items: center; margin-top: 16px; font-size: 14px; }
.ur-depo footer span:last-child { opacity: .65; }

.ur-onde { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 44px; padding: 96px 20px; max-width: 1400px; margin: 0 auto; }
.ur-unidade h2 { font-size: clamp(56px, 7vw, 96px); margin-bottom: 18px; }
.ur-unidade address { display: grid; font-size: 19px; font-stretch: 90%; }
.ur-resumo { margin-top: 14px; font-weight: 700; color: var(--acento); }
.ur-unidade-acoes { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }

.ur-final { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px; padding: 64px 20px; background: var(--acento); color: var(--sobre-acento); }
.ur-final p { font: 900 clamp(48px, 7vw, 110px)/.88 "Big Shoulders", sans-serif; text-transform: uppercase; max-width: 12ch; }

.ur-rodape { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; padding: 28px 20px; }
.ur-rodape nav { display: flex; flex-wrap: wrap; gap: 18px; margin-right: auto; }
.ur-rodape nav a { font-size: 15px; opacity: .75; }

@media (max-width: 860px) {
  .ur-nav, .ur-btn-topo { display: none; }
  .ur-hero { grid-template-columns: 1fr; align-items: start; padding-top: 28px; }
  .ur-hero-foto { order: -1; aspect-ratio: 5 / 4; margin-right: 10px; box-shadow: 10px 10px 0 var(--acento); }
  .ur-acoes .ur-btn { flex: 1; padding: 0 14px; font-size: 18px; }
  .ur-nome.longo { font-size: clamp(46px, 13vw, 80px); }
  .ur-servicos, .ur-equipe, .ur-depo, .ur-onde { padding: 64px 18px; }
  .ur-cat li a { grid-template-columns: minmax(0, 1fr) auto; gap: 6px 16px; padding: 16px 4px; }
  .ur-s-info { grid-column: 1; grid-row: 2; }
  .ur-s-preco { grid-row: 1 / span 2; }
  .ur-sobre { grid-template-columns: 1fr; padding: 64px 18px; }
  .ur-galeria { grid-template-columns: 1fr 1fr; grid-auto-rows: 44vw; }
  .ur-equipe ul { grid-template-columns: 1fr 1fr; gap: 12px; }
  .ur-equipe b { font-size: 22px; }
  .ur-depo-lista { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; margin: 0 -18px; padding: 0 18px 8px; }
  .ur-depo blockquote { flex: 0 0 84%; scroll-snap-align: start; }
  .ur-final { padding: 48px 18px; }
}