/* Hallmark · checked: 2026-11-06 · genre: modern-minimal (inferred)
 * floor: 0 FAIL · fixed: 34, 48, 54, 62, 63, 67, 76, F1 · structural: printed (44c, 58, 83)
 * built: the project · redesign: polish · v2.0.0 */
/* Hallmark · waive 38iii · one accented phrase, once, in the hero h1 · "em um só contrato" em tijolo é a assinatura da GTN TK no topo */
/* Hallmark · waive 28b · the montagem video sits below the fold and is not the LCP · the montagem animation loads only near the screen, preload none */
/* Hallmark · waive 24b · spacing set with clamp() steps and the --secao token, not a 4px grid · o espaçamento da GTN TK é ajustado seção a seção, do prédio ao contrato */
/* Hallmark · dismissed 25 · the flagged measures are one or two sentence ledes under section heads, which may sit from 28ch */
/* Hallmark · answered F15 · the column gaps follow each section composition; unifying them is a layout change, out of scope for a polish */
/* GTN TK · direção D3 "Encaixe em Fira Sans". Tokens descritos em DESIGN.md. */

:root {
  --cal: #F4EEE6;
  --cal-claro: #FBF8F4;
  --linha: #DCCFC2;
  --cafe: #2A1F1A;
  --texto-2: #5A4E47;
  --texto-3: #6F635B;
  --tijolo: #BF4A2C;
  --tijolo-escuro: #A33D22;
  --tijolo-vivo: #DA6A4A;
  --argila: #E6C3B6;
  --cal-sobre-cafe: #CDBFB3;

  --fonte: 'Fira Sans', 'Helvetica Neue', Arial, sans-serif;

  --t-corpo: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);
  --t-apoio: clamp(1.125rem, 1rem + 0.6vw, 1.5rem);
  --t-h3: clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem);
  --t-h2: clamp(2rem, 1.3rem + 2.8vw, 3.75rem);
  --t-h1: clamp(2.5rem, 1.4rem + 4.4vw, 5.5rem);
  --t-numero: clamp(3.5rem, 2.4rem + 4.4vw, 6rem);

  --largura: 1240px;
  --margem: clamp(16px, 4vw, 48px);
  --secao: clamp(88px, 6rem + 4vw, 168px);

  --curva: cubic-bezier(0.16, 1, 0.3, 1);

  --z-topo: 10;
  --z-menu: 20;
  --z-pular: 30;

  /* tons derivados (transparências e superfícies), para não haver cor solta no CSS */
  --argila-16: rgba(230, 195, 182, 0.16);
  --argila-40: rgba(230, 195, 182, 0.4);
  --branco: #FFFFFF;
  --cafe-00: rgba(42, 31, 26, 0);
  --cafe-05: rgba(42, 31, 26, 0.05);
  --cafe-20: rgba(42, 31, 26, 0.2);
  --cafe-25: rgba(42, 31, 26, 0.25);
  --cafe-35: rgba(42, 31, 26, 0.35);
  --cafe-45: rgba(42, 31, 26, 0.45);
  --cafe-46: rgba(42, 31, 26, 0.46);
  --cafe-52: rgba(42, 31, 26, 0.52);
  --cafe-60: rgba(42, 31, 26, 0.6);
  --cafe-62: rgba(42, 31, 26, 0.62);
  --cafe-70: rgba(42, 31, 26, 0.7);
  --cafe-80: rgba(42, 31, 26, 0.8);
  --cafe-82: rgba(42, 31, 26, 0.82);
  --cafe-84: rgba(42, 31, 26, 0.84);
  --cafe-85: rgba(42, 31, 26, 0.85);
  --cafe-86: rgba(42, 31, 26, 0.86);
  --cafe-88: rgba(42, 31, 26, 0.88);
  --cafe-92: rgba(42, 31, 26, 0.92);
  --cafe-94: rgba(42, 31, 26, 0.94);
  --cafe-95: rgba(42, 31, 26, 0.95);
  --cafe-96: rgba(42, 31, 26, 0.96);
  --cafe-97: rgba(42, 31, 26, 0.97);
  --cafe-cartao: #352823;
  --cafe-cartao-hover: #3D2E27;
  --cafe-fundo: #231A16;
  --cal-04: rgba(244, 238, 230, 0.04);
  --cal-05: rgba(244, 238, 230, 0.05);
  --cal-07: rgba(244, 238, 230, 0.07);
  --cal-10: rgba(244, 238, 230, 0.1);
  --cal-14: rgba(244, 238, 230, 0.14);
  --cal-15: rgba(244, 238, 230, 0.15);
  --cal-16: rgba(244, 238, 230, 0.16);
  --cal-18: rgba(244, 238, 230, 0.18);
  --cal-20: rgba(244, 238, 230, 0.2);
  --cal-22: rgba(244, 238, 230, 0.22);
  --cal-25: rgba(244, 238, 230, 0.25);
  --cal-28: rgba(244, 238, 230, 0.28);
  --cal-30: rgba(244, 238, 230, 0.3);
  --cal-35: rgba(244, 238, 230, 0.35);
  --cal-40: rgba(244, 238, 230, 0.4);
  --cal-45: rgba(244, 238, 230, 0.45);
  --cal-60: rgba(244, 238, 230, 0.6);
  --cal-claro-90: rgba(251, 248, 244, 0.9);
  --madeira-cabeceira: #E2D3BE;
  --madeira-clara: #EFE6DB;
  --mascara: #000;
  --tijolo-vivo-00: rgba(218, 106, 74, 0);
  --tijolo-vivo-10: rgba(218, 106, 74, 0.1);
  --tijolo-vivo-35: rgba(218, 106, 74, 0.35);
  --tijolo-vivo-70: rgba(218, 106, 74, 0.7);
}

*, *::before, *::after { box-sizing: border-box; }

html {
  overflow-x: clip;
  scroll-behavior: smooth;
  scroll-padding-top: 88px;
  -webkit-text-size-adjust: 100%;
}

body {
  overflow-x: clip;
  margin: 0;
  background: var(--cal);
  color: var(--cafe);
  font-family: var(--fonte);
  font-size: var(--t-corpo);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  margin: 0;
  font-weight: 700;
  line-height: 1.06;
  letter-spacing: -0.015em;
  text-wrap: balance;
}

p { margin: 0; text-wrap: pretty; }
ul, ol { margin: 0; padding: 0; list-style: none; }
dl, dd { margin: 0; }

a { color: var(--tijolo-escuro); text-underline-offset: 0.2em; }
a:hover { color: var(--cafe); }

:focus-visible {
  outline: 3px solid var(--tijolo-escuro);
  outline-offset: 3px;
}

.pular {
  position: absolute;
  left: var(--margem);
  top: -100px;
  z-index: var(--z-pular);
  padding: 12px 16px;
  background: var(--cafe);
  color: var(--cal);
  font-weight: 600;
}
.pular:focus { top: 12px; color: var(--cal); }

/* Símbolo: a base em U e o T que se encaixa nela */
.peca-base { fill: var(--cafe); }
.peca-t { fill: var(--tijolo); }

/* Botões */
.botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 0 26px;
  border: 2px solid transparent;
  font-weight: 600;
  font-size: 1.0625rem;
  line-height: 1.2;
  text-decoration: none;
  transition: background-color 200ms var(--curva), color 200ms var(--curva), border-color 200ms var(--curva);
}
.botao--principal { background: var(--tijolo-escuro); color: var(--cal); }
.botao--principal:hover { background: var(--cafe); color: var(--cal); }
.botao--secundario { border-color: var(--cafe); color: var(--cafe); }
.botao--secundario:hover { background: var(--cafe); color: var(--cal); }
.botao--claro { background: var(--cal); color: var(--cafe); }
.botao--claro:hover { background: var(--argila); color: var(--cafe); }
.botao--contorno-claro { border-color: var(--cal-sobre-cafe); color: var(--cal); }
.botao--contorno-claro:hover { border-color: var(--cal); background: var(--cal); color: var(--cafe); }
.botao--tijolo { background: var(--tijolo-escuro); color: var(--cal); }
.botao--tijolo:hover { background: var(--cal); color: var(--cafe); }
.botao--compacto { min-height: 44px; padding: 0 18px; font-size: 1rem; }
/* Acesso restrito ao Decor+: discreto, só contorno, com cadeado */
.botao--acesso { gap: 8px; padding: 0 14px; border-width: 1px; border-color: var(--cafe-35); color: var(--cafe); font-weight: 500; font-size: 0.9375rem; }
.botao--acesso:hover { border-color: var(--cafe); background: var(--cafe); color: var(--cal); }
.topo.escuro .botao--acesso { border-color: var(--cal-45); color: var(--cal); }
.topo.escuro .botao--acesso:hover { border-color: var(--cal); background: var(--cal); color: var(--cafe); }
.cadeado { width: 16px; height: 16px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; }
.botao:active { transform: scale(0.98); }
.seta { display: inline-block; margin-left: 10px; transition: transform 250ms var(--curva); }
.botao:hover .seta { transform: translateX(5px); }

.acoes { display: flex; flex-wrap: wrap; gap: 12px; }

/* Topo */
.topo {
  position: sticky;
  top: 0;
  z-index: var(--z-topo);
  background: var(--cal);
  border-bottom: 1px solid transparent;
  transition: border-color 300ms var(--curva), background-color 300ms var(--curva);
}
.topo.rolou { border-bottom-color: var(--linha); }
/* Sobre o hero, o topo fica em café; depois dele, volta para a cal */
.topo.escuro { background: var(--cafe); border-bottom-color: transparent; }
.topo .marca, .topo .menu__lista a:not(.botao), .topo .menu__abrir { transition: color 300ms var(--curva), border-color 300ms var(--curva); }
.topo .marca .peca-base { transition: fill 300ms var(--curva); }
.topo.escuro .marca, .topo.escuro .menu__lista a:not(.botao) { color: var(--cal); }
.topo.escuro .marca .peca-base { fill: var(--cal); }

.topo__barra {
  max-width: calc(var(--largura) + 2 * var(--margem));
  margin: 0 auto;
  padding: 14px var(--margem);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

/* Logo (opção D, 22/10/2026): GTN forte, uma régua fina e TK leve. As maiúsculas têm a altura do símbolo (--s). */
.marca {
  --s: 32px;
  display: inline-flex;
  align-items: center;
  gap: calc(var(--s) * 0.3);
  color: var(--cafe);
  text-decoration: none;
}
.marca:hover { color: var(--cafe); }
.marca__simbolo { width: var(--s); height: var(--s); flex-shrink: 0; }
.marca__nome {
  display: inline-flex;
  align-items: center;
  gap: 0.18em;
  font-size: calc(var(--s) / 0.689);
  font-weight: 800;
  line-height: 1;
  text-box: trim-both cap alphabetic;
  white-space: nowrap;
}
.marca__regua { width: max(1px, calc(var(--s) * 0.04)); height: var(--s); background: currentColor; opacity: 0.35; }
.marca__tk { font-weight: 300; }

.menu { position: relative; }
.menu__abrir { display: none; }
.menu__lista { display: flex; align-items: center; gap: 24px; white-space: nowrap; }
.menu__lista a:not(.botao) {
  color: var(--cafe);
  font-weight: 500;
  font-size: 1rem;
  text-decoration: none;
  padding: 10px 0;
  background: linear-gradient(var(--tijolo), var(--tijolo)) no-repeat left bottom / 0 2px;
  transition: background-size 250ms var(--curva);
}
.menu__lista a:not(.botao):hover { background-size: 100% 2px; }

@media (max-width: 1359px) {
  .menu__abrir {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 18px;
    border: 2px solid var(--cafe);
    background: transparent;
    color: var(--cafe);
    font: 600 1rem var(--fonte);
    cursor: pointer;
  }
  .menu__abrir[aria-expanded="true"] { background: var(--cafe); color: var(--cal); }
  .topo.escuro .menu__abrir { border-color: var(--cal); color: var(--cal); }
  .topo.escuro .menu__abrir[aria-expanded="true"] { background: var(--cal); color: var(--cafe); }
  .topo.escuro .menu__lista li a:not(.botao) { color: var(--cafe); }
  .menu__lista {
    position: absolute;
    right: 0;
    top: calc(100% + 12px);
    z-index: var(--z-menu);
    width: 320px;
    max-width: calc(100dvw - 2 * var(--margem));
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 8px 20px 20px;
    background: var(--cal-claro);
    border: 1px solid var(--linha);
    box-shadow: 0 18px 40px -20px var(--cafe-35);
  }
  .js .menu__lista:not(.aberto) { display: none; }
  .menu__lista li a:not(.botao) { display: block; padding: 14px 0; border-bottom: 1px solid var(--linha); background: none; }
  .menu__acao { margin-top: 16px; }
  .menu__acao .botao { width: 100%; }
  .menu__acao--restrito { margin-top: 8px; }
  .topo.escuro .menu__lista .botao--acesso { border-color: var(--cafe-35); color: var(--cafe); }
}

/* Hero: fotos de obras entregues trocando ao fundo, cobertas de café; texto à esquerda, a fachada do prédio à direita.
   O café fecha embaixo, para os números de prova ficarem sobre a cor lisa. */
.hero { position: relative; isolation: isolate; overflow: hidden; background: var(--cafe); color: var(--cal); }
.hero::after { content: ""; position: absolute; inset: 0; pointer-events: none; }
.hero__fotos { position: absolute; inset: 0; z-index: -2; overflow: hidden; pointer-events: none; }
/* Cada foto entra por fade e aproxima devagar enquanto está na tela; ao sair, volta ao tamanho só depois do fade */
.hero__foto {
  position: absolute;
  inset: 0;
  background: center / cover no-repeat;
  transform: scale(1.02);
  transition: opacity 1600ms var(--curva), transform 0s linear 1600ms;
}
.js .hero__foto:not(.ativa) { opacity: 0; }
.hero__foto.ativa { opacity: 1; transform: scale(1.1); transition: opacity 1600ms var(--curva), transform 9000ms linear; }
/* Pausa das fotos: discreta, no canto, só aparece quando o script roda */
.hero__pausa {
  position: absolute;
  top: 16px;
  right: var(--margem);
  z-index: 1;
  min-height: 44px;
  padding: 0 16px;
  border: 1px solid var(--cal-sobre-cafe);
  background: var(--cafe);
  color: var(--cal);
  font: 500 0.875rem var(--fonte);
  cursor: pointer;
  transition: background-color 200ms var(--curva), color 200ms var(--curva);
}
.hero__pausa:hover { background: var(--cal); color: var(--cafe); }
.hero__pausa[hidden] { display: none; }
.hero::after {
  z-index: -1;
  background:
    linear-gradient(to top, var(--cafe) 0%, var(--cafe-92) 24%, var(--cafe-00) 58%),
    linear-gradient(90deg, var(--cafe-95) 0%, var(--cafe-84) 40%, var(--cafe-46) 72%, var(--cafe-52) 100%);
}
.hero__interno {
  max-width: calc(var(--largura) + 2 * var(--margem));
  margin: 0 auto;
  padding: clamp(48px, 7vw, 112px) var(--margem) clamp(56px, 6vw, 88px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(240px, 0.5fr);
  grid-template-areas:
    "texto fachada"
    "provas provas";
  column-gap: clamp(32px, 6vw, 104px);
  row-gap: clamp(56px, 7vw, 104px);
}

.hero__texto { grid-area: texto; display: flex; flex-direction: column; gap: 28px; align-self: center; }

.assinatura {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--argila);
}

.hero h1 { font-size: var(--t-h1); line-height: 1.02; font-weight: 800; letter-spacing: -0.025em; max-width: 14ch; }
.hero h1 .destaque { color: var(--tijolo-vivo); }
.hero__apoio { font-size: var(--t-apoio); line-height: 1.45; color: var(--cal-sobre-cafe); max-width: 40ch; }
.hero .acoes { margin-top: 8px; }

/* A fachada: cada unidade é o símbolo. Na abertura, o prédio se completa andar por andar. */
.fachada { grid-area: fachada; margin: 0; align-self: center; justify-self: end; width: 100%; max-width: 400px; display: grid; gap: 18px; }
.fachada__desenho { display: block; width: 100%; height: auto; overflow: visible; }
.fachada__contorno { fill: none; stroke: var(--cal-22); stroke-width: 1.5; }
.fachada__chao { fill: var(--cal-sobre-cafe); }
.fachada .peca-base { fill: var(--cal); }
.fachada .peca-t { fill: var(--tijolo-vivo); transition: transform 350ms var(--curva); }
.fachada .un:hover .peca-t { transform: translateY(-22px); }
.fachada figcaption { font-size: 0.9375rem; color: var(--cal-sobre-cafe); }

.provas {
  grid-area: provas;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr)) minmax(0, 1.5fr);
  gap: 32px;
  border-top: 1px solid var(--cal-28);
  padding-top: 32px;
}
.prova { display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: 12px; }
.prova dd {
  font-size: var(--t-numero);
  font-weight: 800;
  line-height: 0.9;
  letter-spacing: -0.03em;
  color: var(--tijolo-vivo);
  font-variant-numeric: tabular-nums;
}
.prova dt { font-size: 1.0625rem; color: var(--cal-sobre-cafe); max-width: 22ch; }

/* Faixa em movimento com os segmentos */
.faixa { background: var(--tijolo-escuro); color: var(--cal); overflow: hidden; }
.faixa__trilho {
  display: flex;
  width: max-content;
  animation: faixa 38s linear infinite;
}
.faixa:hover .faixa__trilho { animation-play-state: paused; }
.faixa span {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  padding: 22px 0.6em 22px 0;
  font-size: clamp(1.25rem, 1rem + 1.2vw, 2rem);
  font-weight: 700;
  letter-spacing: -0.01em;
  white-space: nowrap;
}
.faixa span::after {
  content: "";
  width: 0.38em;
  height: 0.38em;
  background: var(--cal);
  margin-left: 0.6em;
}
@keyframes faixa {
  to { transform: translateX(-50%); }
}

/* Do piso ao talher: um mosaico em que cada item é uma peça. O projeto é a peça maior,
   a obra tem um tom e a montagem outro, e a última peça é o talher. */
.inventario__interno {
  max-width: calc(var(--largura) + 2 * var(--margem));
  margin: 0 auto;
  padding: var(--secao) var(--margem);
  display: grid;
  gap: clamp(40px, 5vw, 64px);
}
.inventario__cabeca { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr); gap: 24px 64px; align-items: end; }
.inventario__cabeca h2 { font-size: var(--t-h2); max-width: 13ch; }
.inventario__cabeca p { color: var(--texto-2); max-width: 44ch; }

/* Montagem: o vídeo do studio saindo do contrapiso, com as etapas sincronizadas embaixo */
.montagem { margin: 0; display: grid; gap: 14px; }
.montagem__tela { position: relative; aspect-ratio: 1672 / 940; background: var(--cafe); overflow: hidden; }
.montagem__video { display: block; width: 100%; height: 100%; object-fit: cover; }
.montagem__selo { position: absolute; left: 14px; top: 12px; padding: 4px 8px; background: var(--cafe-70); color: var(--cal); font-size: 0.8125rem; }
.montagem__legenda {
  position: absolute;
  left: clamp(14px, 3vw, 32px);
  bottom: clamp(14px, 3vw, 28px);
  padding: 12px 18px;
  background: var(--cafe);
  color: var(--cal);
  font-size: clamp(1.125rem, 0.9rem + 1vw, 1.75rem);
  font-weight: 800;
  letter-spacing: -0.01em;
  overflow: hidden;
}
.montagem__legenda span { display: inline-block; }
.montagem__etapas { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.montagem__etapas button {
  position: relative;
  width: 100%;
  min-height: 52px;
  padding: 14px 4px 8px;
  border: 0;
  background: transparent;
  color: var(--texto-3);
  font: 600 0.9375rem var(--fonte);
  text-align: left;
  cursor: pointer;
  transition: color 250ms var(--curva);
}
.montagem__etapas button::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--linha); }
.montagem__etapas button::after { content: ""; position: absolute; left: 0; top: 0; height: 3px; width: calc(var(--p, 0) * 100%); background: var(--tijolo); }
.montagem__etapas button.feita { color: var(--cafe); }
.montagem__etapas button.feita::after { width: 100%; }
.montagem__etapas button[aria-current="step"] { color: var(--tijolo-escuro); }
.montagem__etapas button:hover { color: var(--cafe); }

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.ic { width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }

.mosaico {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  grid-auto-rows: minmax(128px, auto);
  grid-auto-flow: dense;
  gap: 10px;
}
.peca {
  background: var(--cal-claro);
  padding: 18px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 18px;
  transition: transform 300ms var(--curva), background-color 300ms var(--curva);
}
.peca:hover { transform: translateY(-4px); }
.peca .ic { color: var(--tijolo-escuro); width: 32px; height: 32px; transition: transform 400ms var(--curva); }
.peca:hover .ic { transform: translateY(-3px); }
.peca__nome { font-size: 1.1875rem; font-weight: 700; line-height: 1.15; }
.peca__fase { font-size: 0.8125rem; font-weight: 600; color: var(--texto-3); }
.peca--obra { background: var(--madeira-clara); }
.peca--larga { grid-column: span 2; }
.peca--projeto { grid-column: span 2; grid-row: span 2; background: var(--cafe); color: var(--cal); padding: 28px; }
.peca--projeto .peca__nome { font-size: clamp(1.75rem, 1.2rem + 1.6vw, 2.75rem); font-weight: 800; letter-spacing: -0.02em; }
.peca--projeto .peca__apoio { color: var(--cal-sobre-cafe); margin-top: 6px; max-width: 30ch; }
.peca--projeto .ic { color: var(--tijolo-vivo); width: 44px; height: 44px; }
.peca--fim { grid-column: span 3; background: var(--tijolo-escuro); color: var(--cal); }
.peca--fim .ic { color: var(--cal); }
.peca--fim .peca__fase { color: var(--argila); }
.peca--fim .peca__nome { font-size: clamp(1.25rem, 1rem + 0.8vw, 1.75rem); }

.inventario__rodape {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 24px 64px;
  align-items: end;
  padding-top: 32px;
  border-top: 1px solid var(--linha);
}
.retorno { display: grid; gap: 12px; max-width: 52ch; }
.retorno__frase { font-size: clamp(1.375rem, 1.1rem + 0.9vw, 1.875rem); font-weight: 800; line-height: 1.1; letter-spacing: -0.015em; }
.retorno p:not(.retorno__frase) { color: var(--texto-2); }
.fora { color: var(--texto-3); font-size: 0.9375rem; }

/* Incorporadoras: a seção pintada de tijolo */
.incorporadoras { position: relative; isolation: isolate; overflow: hidden; background: var(--tijolo-escuro); color: var(--cal); }

/* Fundo: a foto de um prédio da GTN tingida de terra. A foto vai em preto e branco e é multiplicada
   sobre o tijolo, então nada fica mais claro que o fundo e o texto em cal só ganha contraste.
   Ela fica ao lado do título e some antes das etapas. */
.predio {
  position: absolute;
  top: 0;
  right: 0;
  z-index: -1;
  width: min(62%, 920px);
  height: clamp(440px, 48vw, 680px);
  overflow: hidden;
  mix-blend-mode: multiply;
  -webkit-mask-image: linear-gradient(to right, transparent, var(--mascara) 40%), linear-gradient(to bottom, var(--mascara) 60%, transparent);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to right, transparent, var(--mascara) 40%), linear-gradient(to bottom, var(--mascara) 60%, transparent);
  mask-composite: intersect;
}
.predio__foto {
  position: absolute;
  /* Folga em cima e embaixo para o movimento ao rolar nunca mostrar a borda da foto */
  inset: -22% 0;
  /* Enquadramento: a torre no centro, cortando a placa da rua à esquerda e os fios à direita */
  background: url("../img/predio-gtn.webp") 38% 30% / cover no-repeat;
  filter: grayscale(1) contrast(1.25) brightness(0.98);
  will-change: transform;
}
.incorporadoras__interno {
  max-width: calc(var(--largura) + 2 * var(--margem));
  margin: 0 auto;
  padding: var(--secao) var(--margem);
  display: grid;
  gap: 28px;
}
.incorporadoras h2 { font-size: var(--t-h2); max-width: 16ch; }
.incorporadoras__apoio { font-size: var(--t-apoio); line-height: 1.4; max-width: 40ch; }

/* A linha do lançamento às chaves: um trilho apagado e o trecho cheio, que corre quando a seção aparece */
.ciclo__trilho {
  margin-top: clamp(28px, 4vw, 56px);
  height: 2px;
  background: var(--cal-30);
}
.ciclo__cheio { display: block; height: 100%; background: var(--cal); transform-origin: left center; }

.ciclo {
  margin-top: -28px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  counter-reset: etapa;
}
.ciclo__etapa {
  counter-increment: etapa;
  position: relative;
  padding: 34px 32px 0 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.ciclo__etapa::before {
  content: counter(etapa);
  position: absolute;
  top: -16px;
  left: 0;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  background: var(--cal);
  color: var(--tijolo-escuro);
  font-weight: 800;
  font-size: 0.9375rem;
}
.ciclo__momento { font-weight: 600; font-size: 1rem; }
.ciclo__etapa h3 { font-size: var(--t-h3); line-height: 1.15; }
.ciclo__etapa p { line-height: 1.5; max-width: 34ch; }

/* Formas de parceria: quatro opções lado a lado, sobre café, e o pagamento numa linha embaixo */
.modelos {
  margin-top: clamp(40px, 5vw, 72px);
  padding: clamp(24px, 4vw, 48px);
  background: var(--cafe);
  display: grid;
  gap: clamp(24px, 3vw, 36px);
}
.modelos__cabeca { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr); gap: 12px 48px; align-items: end; }
.modelos h3 { font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.25rem); font-weight: 800; letter-spacing: -0.02em; line-height: 1.1; max-width: 20ch; }
.modelos__cabeca p { color: var(--cal-sobre-cafe); max-width: 44ch; }
.modelos__opcoes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.modelos__opcoes li {
  display: flex; flex-direction: column; gap: 10px;
  padding: 20px 20px 22px;
  background: var(--cafe-cartao);
  border-top: 2px solid var(--tijolo-vivo);
  transition: transform 300ms var(--curva), background-color 300ms var(--curva);
}
.modelos__opcoes li:hover { transform: translateY(-4px); background: var(--cafe-cartao-hover); }
.modelos__rotulo { font-size: 0.9375rem; font-weight: 700; color: var(--tijolo-vivo); }
.modelos__opcoes strong { font-size: 1.125rem; font-weight: 700; line-height: 1.25; color: var(--cal); }
.modelos__opcoes p { font-size: 0.9375rem; line-height: 1.5; color: var(--cal-sobre-cafe); }
.modelos__pagamento { padding-top: 18px; border-top: 1px solid var(--cal-20); color: var(--cal-sobre-cafe); }
.modelos__pagamento strong { color: var(--cal); }

/* Case B41 dentro de Incorporadoras: foto da praça e o texto, sobre café */
.case-b41 {
  margin-top: clamp(40px, 5vw, 72px);
  display: grid;
  grid-template-columns: minmax(240px, 0.62fr) minmax(0, 1fr);
  background: var(--cafe);
}
.case-b41__foto { position: relative; min-height: 260px; }
.case-b41__foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.case-b41__texto { padding: clamp(24px, 4vw, 48px); display: flex; flex-direction: column; align-items: flex-start; gap: 18px; }
.case-b41 h3 { font-size: clamp(1.75rem, 1.2rem + 2vw, 2.75rem); font-weight: 800; letter-spacing: -0.02em; line-height: 1.05; max-width: 18ch; }
.case-b41 p:not(.selo) { color: var(--cal-sobre-cafe); max-width: 52ch; font-size: 1.125rem; }

/* Linha do tempo do B41: etapas feitas em tijolo, a atual pulsando, as próximas só em contorno */
.linha-b41 {
  --feitas: 3;            /* etapas concluídas antes da atual */
  --total: 7;
  position: relative;
  width: 100%;
  margin-top: 8px;
  display: grid;
  grid-template-columns: repeat(var(--total), minmax(0, 1fr));
  gap: 8px;
  padding-top: 28px;
  isolation: isolate;
}
.linha-b41::before, .linha-b41::after {
  content: "";
  position: absolute;
  top: 7px;
  left: 7px;
  height: 2px;
  z-index: 0;
}
.linha-b41::before { right: calc((100% - 8px * (var(--total) - 1)) / var(--total) - 7px); background: var(--cal-25); }
/* o trecho cheio vai do primeiro ponto até o ponto da etapa atual */
.linha-b41::after {
  width: calc((100% + 8px) / var(--total) * var(--feitas));
  background: var(--tijolo-vivo);
  transform-origin: left center;
}
.linha-b41 li { position: relative; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.linha-b41 li::before {
  content: "";
  position: absolute;
  top: -28px;
  left: 0;
  width: 16px;
  height: 16px;
  box-sizing: border-box;
  border: 2px solid var(--cal-45);
  background: var(--cafe);
  z-index: 1;
}
.linha-b41 li.feita::before { border-color: var(--tijolo-vivo); background: var(--tijolo-vivo); }
.linha-b41 li.agora::before { border-color: var(--cal); background: var(--cal); box-shadow: 0 0 0 0 var(--tijolo-vivo-70); animation: anel 1.8s var(--curva) infinite; }
@keyframes anel {
  0% { box-shadow: 0 0 0 0 var(--tijolo-vivo-70); }
  100% { box-shadow: 0 0 0 12px var(--tijolo-vivo-00); }
}
.linha-b41 b { font-size: 0.875rem; font-weight: 700; line-height: 1.2; color: var(--cal); }
.linha-b41 b a { color: inherit; text-decoration-color: var(--cal-40); }
.linha-b41 span { font-size: 0.8125rem; color: var(--cal-sobre-cafe); }
.linha-b41 li.agora b { color: var(--tijolo-vivo); }
/* etapas em que a GTN TK atua */
.tag-gtn {
  align-self: flex-start;
  margin-top: 4px;
  padding: 2px 6px;
  font-size: 1rem;
  font-weight: 700;
  font-style: normal;
  color: var(--cafe);
  background: var(--tijolo-vivo);
}
.linha-b41 li:not(.feita):not(.agora) b { color: var(--cal-sobre-cafe); }

/* O que a incorporadora ganha */
.ganhos { margin-top: clamp(40px, 5vw, 72px); display: grid; gap: 24px; }
.ganhos__titulo { font-size: var(--t-h3); }
.ganhos__lista { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px 32px; }
.ganhos__lista li { display: grid; gap: 10px; align-content: start; padding-top: 18px; border-top: 1px solid var(--cal-40); }
.ganhos__lista strong { font-size: 1.1875rem; font-weight: 700; line-height: 1.2; }
.ganhos__lista span { line-height: 1.5; }

/* Encaixe: o configurador em desenvolvimento, com uma prévia em que se colocam e tiram módulos */
.encaixe { background: var(--cal-claro); }
.encaixe__interno {
  max-width: calc(var(--largura) + 2 * var(--margem));
  margin: 0 auto;
  padding: var(--secao) var(--margem);
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1fr);
  gap: 48px clamp(40px, 6vw, 96px);
  align-items: center;
}
.encaixe__texto { display: flex; flex-direction: column; gap: 22px; }
.encaixe h2 { font-size: var(--t-h2); max-width: 15ch; }
.encaixe__texto > p { color: var(--texto-2); max-width: 46ch; }
.selo {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  border: 1px solid var(--cafe);
  font-size: 0.9375rem;
  font-weight: 600;
}
.selo::before {
  content: "";
  width: 9px;
  height: 9px;
  background: var(--tijolo);
  animation: pulso 1.8s var(--curva) infinite;
}
@keyframes pulso {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.25; }
}
.encaixe__pontos { display: grid; gap: 12px; }
.encaixe__pontos li { padding-left: 22px; position: relative; color: var(--texto-2); max-width: 48ch; }
.encaixe__pontos li::before { content: ""; position: absolute; left: 0; top: 0.6em; width: 9px; height: 9px; background: var(--tijolo); }
.encaixe__pontos strong { color: var(--cafe); font-weight: 700; }
.encaixe__frase { font-size: clamp(1.25rem, 1rem + 0.7vw, 1.625rem); font-weight: 700; line-height: 1.2; letter-spacing: -0.01em; max-width: 30ch; padding-top: 18px; border-top: 2px solid var(--cafe); }

.previa { margin: 0; display: grid; gap: 16px; }
.previa__tela { position: relative; border: 2px solid var(--cafe); background: var(--cal); overflow: hidden; }
.previa__ambiente { display: block; width: 100%; height: auto; }
/* Quando a maquete 3D carrega, ela toma o lugar do desenho */
.previa--3d .previa__ambiente { display: none; }
.previa__3d { display: block; cursor: grab; touch-action: pan-y; }
.previa__3d:active { cursor: grabbing; }
.previa__rotulo { position: absolute; left: 12px; top: 10px; padding: 4px 8px; background: var(--cal-claro-90); font-size: 0.8125rem; color: var(--texto-2); }
/* Traço técnico: fundo claro, linhas em café e a cota de cada módulo, como numa prancha de projeto */
.pv-parede { fill: var(--cal-claro); }
.pv-piso { fill: var(--cal); }
.pv-chao { fill: none; stroke: var(--cafe); stroke-width: 2.5; }
.pv-madeira, .pv-pedra, .pv-tecido, .pv-cabeceira, .pv-travesseiro, .pv-ar { stroke: var(--cafe); stroke-width: 1.5; }
.pv-madeira { fill: var(--madeira-clara); }
.pv-pedra { fill: var(--branco); }
.pv-tecido { fill: var(--argila); }
.pv-cabeceira { fill: var(--madeira-cabeceira); }
.pv-travesseiro { fill: var(--branco); }
.pv-ar { fill: var(--branco); }
.pv-metal { fill: none; stroke: var(--cafe); stroke-width: 2.5; stroke-linecap: round; }
.pv-linha { fill: none; stroke: var(--cafe); stroke-width: 1.2; opacity: 0.6; }
.cota path { fill: none; stroke: var(--tijolo-escuro); stroke-width: 1.2; }
.cota text { fill: var(--tijolo-escuro); font: 600 13px var(--fonte); text-anchor: middle; }

/* Cada módulo desce e se encaixa no lugar; ao sair, sobe e some */
.mod { transition: opacity 380ms var(--curva), transform 520ms var(--curva); }
.js .mod.fora { opacity: 0; transform: translateY(-26px); pointer-events: none; }

.modulos { display: grid; gap: 14px; }
.modulos__total { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; font-size: 1rem; color: var(--texto-2); }
.modulos__fechado { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; background: var(--cafe); color: var(--cal); font-size: 0.875rem; font-weight: 600; }
.modulos__fechado::before { content: ""; width: 8px; height: 8px; background: var(--tijolo-vivo); }
.modulos__total strong { font-size: 1.5rem; font-weight: 800; color: var(--tijolo-escuro); margin-right: 4px; font-variant-numeric: tabular-nums; }
.modulos__grupos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 20px; }
.modulos__grupo { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.modulos__nome { flex-basis: 100%; font-size: 0.875rem; font-weight: 600; color: var(--texto-3); }
.modulos__grupo button {
  min-height: 44px;
  padding: 0 14px;
  border: 1px solid var(--cafe);
  background: transparent;
  color: var(--cafe);
  font: 500 0.9375rem var(--fonte);
  cursor: pointer;
  transition: background-color 200ms var(--curva), color 200ms var(--curva);
}
.modulos__grupo button:hover { background: var(--cal); }
.modulos__grupo button[aria-pressed="true"] { background: var(--cafe); color: var(--cal); }
html:not(.js) .modulos { display: none; }

/* Imobiliárias: os dois caminhos do imóvel mobiliado, lado a lado, e como a imobiliária participa */
.imobiliarias { background: var(--cal-claro); }
.imobiliarias__interno {
  max-width: calc(var(--largura) + 2 * var(--margem));
  margin: 0 auto;
  padding: var(--secao) var(--margem);
  display: grid;
  gap: clamp(36px, 5vw, 64px);
}
.assinatura--escura { color: var(--tijolo-escuro); }
.imobiliarias__cabeca { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr); gap: 16px 64px; align-items: end; }
.imobiliarias__cabeca .assinatura { grid-column: 1 / -1; }
.imobiliarias h2 { font-size: var(--t-h2); max-width: 16ch; }
.imobiliarias__cabeca > p:not(.assinatura) { color: var(--texto-2); font-size: 1.125rem; max-width: 44ch; }
.caminhos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.caminho { display: grid; grid-template-rows: auto 1fr; background: var(--cal); border: 1px solid var(--linha); }
.caminho__foto { margin: 0; aspect-ratio: 16 / 9; overflow: hidden; }
.caminho__foto img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 700ms var(--curva); }
.caminho__texto { padding: clamp(22px, 3vw, 32px); display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.caminho h3 { font-size: clamp(1.375rem, 1.1rem + 0.9vw, 1.875rem); font-weight: 800; letter-spacing: -0.015em; line-height: 1.12; max-width: 22ch; }
.caminho__texto > p:not(.caminho__prova) { color: var(--texto-2); max-width: 44ch; }
.caminho__lista { display: grid; gap: 8px; }
.caminho__lista li { position: relative; padding-left: 20px; color: var(--texto-2); }
.caminho__lista li::before { content: ""; position: absolute; left: 0; top: 0.6em; width: 8px; height: 8px; background: var(--tijolo); }
.caminho__prova { margin-top: auto; padding-top: 14px; border-top: 1px solid var(--linha); width: 100%; color: var(--texto-2); }
.caminho__prova b { color: var(--tijolo-escuro); font-weight: 800; }
.imobiliarias__como { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 20px 40px; align-items: center; padding-top: 28px; border-top: 2px solid var(--cafe); }
.imobiliarias__como h3 { font-size: var(--t-h3); max-width: 12ch; }
.imobiliarias__passos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; counter-reset: passo-imob; }
.imobiliarias__passos li { counter-increment: passo-imob; display: grid; gap: 4px; align-content: start; }
.imobiliarias__passos b::before { content: counter(passo-imob) " · "; color: var(--tijolo-escuro); }
.imobiliarias__passos span { color: var(--texto-2); font-size: 0.9375rem; }

/* Corporativos: a foto do escritório entregue, escurecida em café, e embaixo o que entra no contrato.
   Sóbria de propósito: sem maquete nem controles, só a obra e os três compromissos. */
.corporativos { background: var(--cal-claro); }
.corporativos__capa { position: relative; isolation: isolate; overflow: hidden; background: var(--cafe); color: var(--cal); }
.corporativos__foto {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: url("../img/corporativos-posicoes.webp") 62% 55% / cover no-repeat;
  filter: grayscale(0.55) contrast(1.05);
}
.corporativos__foto::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to right, var(--cafe-94) 0%, var(--cafe-82) 38%, var(--cafe-35) 75%, var(--cafe-20) 100%),
    linear-gradient(to top, var(--cafe-70), transparent 45%);
}
.corporativos__cabeca {
  max-width: calc(var(--largura) + 2 * var(--margem));
  margin: 0 auto;
  min-height: clamp(460px, 44vw, 620px);
  padding: var(--secao) var(--margem) 40px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 22px;
}
.corporativos h2 { font-size: var(--t-h2); max-width: 17ch; }
.corporativos__apoio { font-size: var(--t-apoio); line-height: 1.45; color: var(--cal-sobre-cafe); max-width: 42ch; }
.corporativos__legenda { margin-top: 18px; font-size: 0.875rem; color: var(--cal-sobre-cafe); }
.corporativos__interno {
  max-width: calc(var(--largura) + 2 * var(--margem));
  margin: 0 auto;
  padding: clamp(48px, 6vw, 88px) var(--margem) var(--secao);
  display: grid;
  gap: clamp(48px, 6vw, 80px);
}
.corporativos__pilares { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px clamp(24px, 4vw, 56px); }
.corporativos__pilares li { padding-top: 20px; border-top: 2px solid var(--cafe); display: grid; gap: 10px; align-content: start; }
.corporativos__pilares h3 { font-size: clamp(1.75rem, 1.3rem + 1.4vw, 2.5rem); font-weight: 800; letter-spacing: -0.02em; line-height: 1; }
.corporativos__pilares p { color: var(--texto-2); max-width: 32ch; }
.corporativos__escopo { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 32px clamp(40px, 6vw, 96px); align-items: start; }
.corporativos__escopo > div { display: flex; flex-direction: column; gap: 18px; align-items: flex-start; }
.corporativos__escopo h3 { font-size: clamp(1.5rem, 1.15rem + 1.1vw, 2rem); font-weight: 800; letter-spacing: -0.015em; line-height: 1.1; max-width: 16ch; }
.corporativos__escopo p { color: var(--texto-2); max-width: 40ch; }
.corporativos__escopo .botao { margin-top: 6px; }
.corporativos__lista { border-top: 1px solid var(--linha); }
.corporativos__lista li { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 4px 24px; padding: 16px 0; border-bottom: 1px solid var(--linha); }
.corporativos__lista strong { font-weight: 700; color: var(--cafe); }
.corporativos__lista span { color: var(--texto-2); }

/* O selo claro, sobre fundos escuros */
.selo--claro { border-color: var(--cal-sobre-cafe); color: var(--cal); }
.selo--claro::before { background: var(--tijolo-vivo); }

/* Segmentos e portfólio */
.segmentos {
  max-width: calc(var(--largura) + 2 * var(--margem));
  margin: 0 auto;
  padding: var(--secao) var(--margem);
  display: grid;
  gap: 36px;
}
.segmentos__cabeca { display: grid; gap: 18px; }
.segmentos__cabeca h2 { font-size: var(--t-h2); max-width: 15ch; }
.segmentos__cabeca p { color: var(--texto-2); font-size: var(--t-apoio); line-height: 1.4; max-width: 44ch; }

.filtro { display: flex; flex-wrap: wrap; gap: 8px; }
.filtro button {
  min-height: 44px;
  padding: 0 18px;
  border: 1px solid var(--cafe);
  background: transparent;
  color: var(--cafe);
  font: 500 1rem var(--fonte);
  cursor: pointer;
  transition: background-color 200ms var(--curva), color 200ms var(--curva);
}
.filtro button:hover { background: var(--cal-claro); }
.filtro button[aria-pressed="true"] { background: var(--cafe); color: var(--cal); }

.portfolio {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr));
  gap: 40px 28px;
}
.obra { display: flex; flex-direction: column; gap: 18px; }
.obra[hidden], .depoimentos[hidden] { display: none; }

.obra--destaque { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 32px 48px; align-items: end; }
.obra--destaque .vaga-foto { aspect-ratio: 16 / 10; }
.obra.obra--destaque h3 { font-size: clamp(2.5rem, 1.6rem + 3vw, 4.5rem); font-weight: 800; letter-spacing: -0.02em; }

.vaga-foto {
  margin: 0;
  position: relative;
  aspect-ratio: 4 / 3;
  background: var(--argila);
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}
.vaga-foto svg {
  position: absolute;
  right: -8%;
  top: -10%;
  width: 62%;
  opacity: 0.16;
}
.vaga-foto svg .peca-t { fill: var(--tijolo-escuro); }
.vaga-foto figcaption {
  position: relative;
  padding: 16px 18px;
  font-size: 0.9375rem;
  line-height: 1.4;
  color: var(--cafe);
}

/* Foto real da obra: recorte fixo 4:3 (16:10 no destaque) e um leve zoom ao passar o mouse */
.obra__foto { margin: 0; position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--argila); }
.obra__foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 700ms var(--curva); }
.obra--destaque .obra__foto { aspect-ratio: 16 / 10; }
/* Botão "Ver N fotos" sobre a foto; o card inteiro abre a galeria */
.obra__ver {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  padding: 14px;
  border: 0;
  background: none;
  cursor: zoom-in;
}
.obra__ver span {
  padding: 8px 12px;
  background: var(--cafe);
  color: var(--cal);
  font: 600 0.875rem var(--fonte);
  transition: background-color 250ms var(--curva), transform 250ms var(--curva);
}
.obra__ver:hover span, .obra__ver:focus-visible span { background: var(--tijolo-escuro); transform: translateY(-2px); }

/* Galeria em tela cheia */
.galeria {
  width: 100%;
  max-width: 100%;
  height: 100dvh;
  max-height: 100dvh;
  margin: 0;
  padding: clamp(16px, 3vw, 40px);
  border: 0;
  background: var(--cafe-97);
  color: var(--cal);
}
.galeria::backdrop { background: var(--cafe-60); }
.galeria[open] { display: grid; place-items: center; }
.galeria__quadro { margin: 0; display: grid; gap: 14px; justify-items: center; max-width: 100%; max-height: 100%; }
.galeria__foto { display: block; max-width: min(1400px, 100%); max-height: calc(100dvh - 140px); object-fit: contain; }
.galeria__legenda { display: flex; flex-wrap: wrap; gap: 6px 18px; justify-content: center; font-size: 1rem; color: var(--cal-sobre-cafe); }
.galeria__legenda span:first-child { color: var(--cal); font-weight: 600; }
.galeria__botao {
  position: absolute;
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border: 1px solid var(--cal-40);
  background: var(--cafe-60);
  color: var(--cal);
  font: 600 1.5rem var(--fonte);
  cursor: pointer;
  transition: background-color 200ms var(--curva);
}
.galeria__botao:hover { background: var(--tijolo-escuro); }
.galeria__botao--fechar { top: 16px; right: 16px; }
.galeria__botao--ant { left: 16px; top: 50%; transform: translateY(-50%); }
.galeria__botao--prox { right: 16px; top: 50%; transform: translateY(-50%); }

.obra__texto { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.obra h3 { overflow-wrap: anywhere; }
.obra__segmento { font-size: 0.9375rem; font-weight: 600; color: var(--texto-3); }
.obra h3 { font-size: var(--t-h3); line-height: 1.15; }
.obra__texto > p:not(.obra__segmento) { color: var(--texto-2); }
.obra__dados { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 12px 40px; border-top: 1px solid var(--linha); padding-top: 16px; }
.obra__dados div { display: flex; flex-direction: column; gap: 4px; }
.obra__dados dt { font-size: 0.9375rem; color: var(--texto-3); }
.obra__dados dd { font-size: 1.375rem; font-weight: 700; color: var(--cafe); }

/* Próximas entregas: uma faixa em café com as obras em andamento, que corre para o lado */
.entregas { background: var(--cafe); color: var(--cal); }
.entregas__interno {
  max-width: calc(var(--largura) + 2 * var(--margem));
  margin: 0 auto;
  padding: var(--secao) var(--margem);
  display: grid;
  gap: clamp(28px, 4vw, 48px);
}
.entregas__cabeca { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 20px 48px; }
.entregas h2 { font-size: var(--t-h2); }
.entregas__cabeca p { margin-top: 16px; color: var(--cal-sobre-cafe); font-size: var(--t-apoio); line-height: 1.45; max-width: 46ch; }
.entregas__setas { display: flex; gap: 8px; }
.entregas__setas button {
  width: 52px; height: 52px; display: grid; place-items: center;
  border: 1px solid var(--cal-45); background: transparent; color: var(--cal);
  font: 600 1.375rem var(--fonte); cursor: pointer;
  transition: background-color 200ms var(--curva), opacity 200ms var(--curva);
}
.entregas__setas button:hover { background: var(--tijolo-escuro); }
.entregas__setas button:disabled { opacity: 0.3; cursor: default; background: transparent; }
.entregas__trilho {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: min(380px, 84%);
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: 2px;
  padding-bottom: 14px;
  scrollbar-width: thin;
  scrollbar-color: var(--tijolo-escuro) transparent;
  cursor: grab;
}
.entregas__trilho.arrastando { cursor: grabbing; scroll-snap-type: none; user-select: none; }
.entrega { scroll-snap-align: start; background: var(--cafe-cartao); display: flex; flex-direction: column; }
.entrega__foto { margin: 0; position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--argila); }
.entrega__foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 700ms var(--curva); pointer-events: none; }
.entrega__vaga svg { position: absolute; right: -8%; top: -10%; width: 62%; opacity: 0.18; }
.entrega__vaga svg .peca-t { fill: var(--tijolo-escuro); }
.entrega__vaga-texto { position: absolute; left: 18px; bottom: 16px; color: var(--cafe); font-size: 0.9375rem; }
.estado { position: absolute; left: 14px; top: 14px; padding: 6px 10px; font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.02em; }
.estado--obra { background: var(--tijolo-vivo); color: var(--cafe); }
.estado--vendido { background: var(--cal); color: var(--cafe); }
.estado--breve { background: var(--cafe-82); color: var(--cal); border: 1px solid var(--cal-60); }
.entrega__texto { padding: 22px 22px 24px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.entrega__cidade { font-size: 0.875rem; font-weight: 600; color: var(--argila); }
.entrega h3 { font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); font-weight: 800; letter-spacing: -0.02em; }
.entrega__texto > p:not(.entrega__cidade) { color: var(--cal-sobre-cafe); }
.entrega__dados { margin-top: auto; padding-top: 14px; display: flex; flex-wrap: wrap; gap: 6px; }
.entrega__dados li { padding: 5px 10px; border: 1px solid var(--cal-30); font-size: 0.875rem; }
.entregas__credito { font-size: 0.8125rem; color: var(--cal-sobre-cafe); }

/* Depoimentos: o rosto da marca são os clientes */
.depoimentos {
  max-width: calc(var(--largura) + 2 * var(--margem));
  margin: 0 auto;
  padding: 0 var(--margem) var(--secao);
  display: grid;
  gap: clamp(32px, 4vw, 56px);
}
.depoimentos__cabeca { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 16px 48px; }
.depoimentos__cabeca h2 { font-size: var(--t-h2); max-width: 16ch; }
.nota-google { font-size: 1.0625rem; color: var(--texto-2); }
.nota-google strong { font-size: 2rem; font-weight: 800; color: var(--tijolo-escuro); margin-right: 6px; }
.depoimentos__grade { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); grid-template-rows: auto auto; gap: 10px; }
.depoimento { margin: 0; padding: clamp(24px, 3vw, 40px); background: var(--cal-claro); display: flex; flex-direction: column; justify-content: space-between; gap: 28px; }
.depoimento blockquote { margin: 0; position: relative; padding-top: 34px; font-size: 1.25rem; font-weight: 500; line-height: 1.4; }
.depoimento blockquote::before { content: "“"; position: absolute; top: -18px; left: -4px; font-size: 5rem; font-weight: 800; line-height: 1; color: var(--tijolo); }
.depoimento figcaption { display: grid; gap: 2px; font-size: 0.9375rem; }
.depoimento figcaption span { color: var(--texto-3); }
.depoimento--destaque { grid-row: span 2; background: var(--cafe); color: var(--cal); }
.depoimento--destaque blockquote { font-size: clamp(1.5rem, 1.1rem + 1.2vw, 2.25rem); font-weight: 600; line-height: 1.25; }
.depoimento--destaque blockquote::before { color: var(--tijolo-vivo); }
.depoimento--destaque figcaption span { color: var(--cal-sobre-cafe); }

/* Método: o título fica parado enquanto as quatro etapas passam; a etapa no centro da tela acende */
.metodo { background: var(--cal-claro); }
.metodo > * { max-width: var(--largura); margin-inline: auto; }
.metodo {
  padding: var(--secao) var(--margem);
  display: grid;
  gap: clamp(40px, 5vw, 72px);
}
.metodo__grade { width: 100%; display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1fr); gap: 32px clamp(40px, 7vw, 112px); align-items: start; }
.metodo__cabeca { position: sticky; top: 128px; display: grid; gap: 24px; }
.metodo__cabeca h2 { font-size: var(--t-h2); max-width: 13ch; }
.metodo__cabeca p { color: var(--texto-2); max-width: 40ch; }

.etapas { counter-reset: passo; }
.etapas li {
  counter-increment: passo;
  display: grid;
  grid-template-columns: 2.1em minmax(0, 1fr);
  grid-template-rows: auto 1fr;
  column-gap: clamp(20px, 3vw, 40px);
  row-gap: 10px;
  padding: clamp(28px, 4vw, 48px) 0;
  border-top: 1px solid var(--linha);
  font-size: var(--t-corpo);
}
.etapas li:last-child { border-bottom: 1px solid var(--linha); }
.etapas li::before {
  content: counter(passo);
  grid-row: 1 / span 2;
  font-size: var(--t-numero);
  font-weight: 800;
  line-height: 0.85;
  letter-spacing: -0.03em;
  color: var(--tijolo);
  transition: color 450ms var(--curva), transform 450ms var(--curva);
}
.etapas h3 { font-size: clamp(1.5rem, 1.2rem + 1vw, 2.25rem); align-self: end; }
.etapas p { color: var(--texto-2); max-width: 38ch; }
.metodo--guiado .etapas li::before { color: var(--linha); }
.metodo--guiado .etapas li.ativo::before { color: var(--tijolo); transform: translateX(6px); }

.garantias {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: 12px 48px;
  padding-top: 28px;
  border-top: 1px solid var(--linha);
  font-size: 1.125rem;
}
.garantias strong { font-weight: 700; }

/* Montar sozinho x GTN TK: nove fornecedores soltos que viram um contrato */
.sozinho {
  max-width: calc(var(--largura) + 2 * var(--margem));
  margin: 0 auto;
  padding: var(--secao) var(--margem);
  display: grid;
  gap: clamp(32px, 4vw, 56px);
}
.sozinho h2 { font-size: var(--t-h2); max-width: 20ch; }

.comparar { border: 2px solid var(--cafe); }
.comparar__chave { display: flex; border-bottom: 2px solid var(--cafe); }
.comparar__chave button {
  flex: 1 1 0;
  min-height: 56px;
  border: 0;
  background: transparent;
  color: var(--cafe);
  font: 600 1.125rem var(--fonte);
  cursor: pointer;
  transition: background-color 300ms var(--curva), color 300ms var(--curva);
}
.comparar__chave button + button { border-left: 2px solid var(--cafe); }
.comparar__chave button[aria-pressed="true"] { background: var(--cafe); color: var(--cal); }
.comparar__corpo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.fornecedores { padding: clamp(20px, 3vw, 36px); border-right: 1px solid var(--linha); display: grid; gap: 18px; align-content: start; }
.comparar__rotulo { font-size: 0.9375rem; font-weight: 600; color: var(--texto-3); }
.fornecedores__mesa { position: relative; min-height: 220px; }
.fornecedores__soltos { display: flex; flex-wrap: wrap; gap: 10px; }
.fornecedores__soltos li {
  padding: 10px 14px;
  background: var(--argila);
  font-weight: 500;
  transition: opacity 350ms var(--curva), transform 450ms var(--curva);
  transition-delay: calc(var(--i) * 35ms);
}
.fornecedores__soltos li:nth-child(3n) { transform: rotate(-2deg); }
.fornecedores__soltos li:nth-child(3n+1) { transform: rotate(1.5deg); }
.fornecedores__um {
  margin-top: 16px;
  display: inline-flex;
  flex-direction: column;
  gap: 4px;
  padding: 18px 22px;
  background: var(--cafe);
  color: var(--cal-sobre-cafe);
  transition: opacity 400ms var(--curva), transform 500ms var(--curva);
}
.fornecedores__um span { font-size: 1.5rem; font-weight: 800; color: var(--cal); }
.js .fornecedores__um { position: absolute; left: 50%; top: 50%; margin: 0; width: max-content; max-width: 92%; transform: translate(-50%, -40%) scale(0.85); opacity: 0; transition-delay: 0ms; }
.js .comparar[data-modo="gtn"] .fornecedores__soltos li { opacity: 0.12; transform: scale(0.9); }
.js .comparar[data-modo="gtn"] .fornecedores__um { opacity: 1; transform: translate(-50%, -50%); transition-delay: 250ms; }

.comparar__linhas { margin: 0; }
.comparar__linhas div { display: grid; grid-template-columns: 8.5em minmax(0, 1fr); gap: 16px; padding: 20px clamp(20px, 3vw, 36px); border-bottom: 1px solid var(--linha); }
.comparar__linhas div:last-child { border-bottom: 0; }
.comparar__linhas dt { font-weight: 600; }
.comparar__linhas dd { display: grid; }
.comparar__linhas dd span { grid-area: 1 / 1; transition: opacity 350ms var(--curva), transform 450ms var(--curva); }
.v-sozinho { color: var(--texto-2); }
.v-gtn { font-weight: 600; }
.comparar:not(.pronto) .v-sozinho::before { content: "Sozinho: "; font-weight: 600; }
.comparar:not(.pronto) .v-gtn { grid-area: 2 / 1 !important; }
.comparar:not(.pronto) .v-gtn::before { content: "GTN TK: "; }
.js .comparar.pronto[data-modo="sozinho"] .v-gtn, .js .comparar.pronto[data-modo="gtn"] .v-sozinho { opacity: 0; transform: translateY(8px); pointer-events: none; }
.js .comparar.pronto[data-modo="gtn"] .v-sozinho { transform: translateY(-8px); }

/* Perguntas frequentes */
.duvidas { background: var(--cal-claro); }
.duvidas__interno {
  max-width: calc(var(--largura) + 2 * var(--margem));
  margin: 0 auto;
  padding: var(--secao) var(--margem);
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: 32px clamp(40px, 6vw, 96px);
  align-items: start;
}
.duvidas h2 { font-size: var(--t-h2); max-width: 11ch; position: sticky; top: 120px; }
.duvidas__lista { border-top: 2px solid var(--cafe); }
.duvidas details { border-bottom: 1px solid var(--linha); }
.duvidas summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 22px 0;
  font-size: clamp(1.125rem, 1rem + 0.4vw, 1.3125rem);
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}
.duvidas summary::-webkit-details-marker { display: none; }
.duvidas summary::after {
  content: "";
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  background:
    linear-gradient(var(--tijolo-escuro), var(--tijolo-escuro)) center / 100% 2px no-repeat,
    linear-gradient(var(--tijolo-escuro), var(--tijolo-escuro)) center / 2px 100% no-repeat;
  transition: transform 300ms var(--curva);
}
.duvidas details[open] summary::after { transform: rotate(45deg); }
.duvidas summary:hover { color: var(--tijolo-escuro); }
.resposta { padding: 0 48px 24px 0; color: var(--texto-2); max-width: 60ch; }

/* Clientes: os nomes, agrupados por tipo, em tipografia (sem logos, que dependem de autorização de uso) */
.clientes { background: var(--cal-claro); border-top: 1px solid var(--linha); }
.clientes__interno {
  max-width: calc(var(--largura) + 2 * var(--margem));
  margin: 0 auto;
  padding: var(--secao) var(--margem);
  display: grid;
  gap: clamp(32px, 4vw, 56px);
}
.clientes__cabeca { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr); gap: 16px 64px; align-items: end; }
.clientes h2 { font-size: var(--t-h2); max-width: 14ch; }
.clientes__cabeca p { color: var(--texto-2); font-size: 1.125rem; max-width: 44ch; }
.clientes__grade { display: grid; grid-template-columns: 1fr 1.6fr 1fr 0.8fr; gap: 28px clamp(24px, 3vw, 48px); }
.clientes__grupo { display: grid; gap: 14px; align-content: start; padding-top: 16px; border-top: 2px solid var(--cafe); }
.clientes__grupo h3 { font-size: 0.9375rem; font-weight: 700; color: var(--tijolo-escuro); }
.clientes__grupo ul { display: grid; gap: 10px; }
.clientes__grupo li { font-size: clamp(1.0625rem, 0.95rem + 0.35vw, 1.25rem); font-weight: 700; line-height: 1.2; color: var(--cafe); }
.clientes__grupo:nth-child(2) ul { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; }
.clientes__pf { padding-top: 20px; border-top: 1px solid var(--linha); color: var(--texto-2); font-size: 1.0625rem; }
.clientes__pf b { color: var(--tijolo-escuro); font-weight: 800; }

/* Contato e rodapé, em café */
.contato { position: relative; isolation: isolate; overflow: hidden; background: var(--cafe); color: var(--cal); }
/* Fundo: o rooftop de um prédio entregue, com a cidade ao fundo. O café cobre o lado do texto e abre à direita. */
.contato::before, .contato::after { content: ""; position: absolute; inset: 0; z-index: -1; }
.contato::before { background: url("../img/contato-rooftop.webp") 70% 45% / cover no-repeat; filter: saturate(0.75); }
.contato::after {
  background:
    linear-gradient(to right, var(--cafe-96) 0%, var(--cafe-88) 40%, var(--cafe-45) 72%, var(--cafe-25) 100%),
    linear-gradient(to top, var(--cafe-60), transparent 40%);
}
.contato__interno {
  max-width: calc(var(--largura) + 2 * var(--margem));
  margin: 0 auto;
  padding: var(--secao) var(--margem);
  display: grid;
  gap: 28px;
}
.contato h2 { font-size: var(--t-h2); max-width: 18ch; line-height: 1.1; }
.contato p { color: var(--cal-sobre-cafe); font-size: var(--t-apoio); line-height: 1.45; max-width: 40ch; }
.contato .acoes { margin-top: 12px; }
.contato .cidades { font-size: 1rem; margin-top: 24px; }

.rodape { background: var(--cafe); color: var(--cal-sobre-cafe); border-top: 1px solid var(--cal-14); }
.rodape__interno {
  max-width: calc(var(--largura) + 2 * var(--margem));
  margin: 0 auto;
  padding: 36px var(--margem) 44px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 32px;
}
.marca--clara { color: var(--cal); }
.marca--clara .peca-base { fill: var(--cal); }
.rodape__restrito { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; color: var(--cal-sobre-cafe); font-size: 0.9375rem; text-decoration: none; }
.rodape__restrito:hover { color: var(--cal); text-decoration: underline; text-underline-offset: 4px; }
.rodape__legal { font-size: 0.9375rem; }

/* Telas menores */
@media (max-width: 1080px) {
  .provas { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 40px; }
  .prova:last-child { grid-column: 1 / -1; }
  .ciclo__trilho { display: none; }
  .ciclo { margin-top: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 44px 0; }
  .ciclo__etapa { border-top: 2px solid var(--cal); }
  .ganhos__lista, .modelos__opcoes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mosaico { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .peca--fim { grid-column: span 3; }
}

@media (max-width: 860px) {
  /* No celular a foto fica só na primeira tela, e o café fecha antes do prédio e dos números */
  .hero__fotos { bottom: auto; height: 860px; }
  /* no celular o botão de pausa fica acima do título, com espaço próprio */
  .hero__interno { padding-top: 84px; }
  .hero__pausa { top: 20px; }
  .hero::after { background: linear-gradient(to bottom, var(--cafe-62) 0px, var(--cafe-80) 420px, var(--cafe) 860px); }
  .contato::after { background: linear-gradient(to top, var(--cafe-95) 0%, var(--cafe-88) 60%, var(--cafe-60) 100%); }
  .hero__interno {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "texto"
      "fachada"
      "provas";
  }
  .fachada { justify-self: center; max-width: 300px; }
  .fachada figcaption { text-align: center; }
  .inventario__cabeca, .inventario__rodape, .metodo__grade, .modelos, .modelos__cabeca, .obra--destaque { grid-template-columns: minmax(0, 1fr); }
  .metodo__cabeca { position: static; }
  .ciclo { grid-template-columns: minmax(0, 1fr); }
  /* No celular a foto cobre o quadro do título inteiro, como em Corporativos, e não se mexe ao rolar */
  .predio {
    width: 100%;
    height: var(--altura-predio, 640px);
    -webkit-mask-image: linear-gradient(to bottom, var(--mascara) 72%, transparent);
    mask-image: linear-gradient(to bottom, var(--mascara) 72%, transparent);
  }
  .predio__foto { inset: 0; background-position: 50% 30%; background-size: cover; transform: none !important; }
  .imobiliarias__cabeca, .caminhos, .imobiliarias__como, .imobiliarias__passos,
  .corporativos__escopo, .encaixe__interno, .duvidas__interno, .comparar__corpo, .depoimentos__grade { grid-template-columns: minmax(0, 1fr); }
  .depoimento--destaque { grid-row: auto; }
  .corporativos__pilares { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .corporativos__foto::after { background: linear-gradient(to top, var(--cafe-96) 0%, var(--cafe-86) 55%, var(--cafe-45) 100%); }
  .case-b41 { grid-template-columns: minmax(0, 1fr); }
  .linha-b41 { grid-template-columns: minmax(0, 1fr); gap: 18px; padding: 0 0 0 30px; }
  .linha-b41 li::before { top: 2px; left: -30px; }
  .linha-b41::before, .linha-b41::after { top: 8px; left: 7px; width: 2px; height: auto; }
  .linha-b41::before { right: auto; bottom: 26px; }
  .linha-b41::after { bottom: auto; height: calc((100% + 18px) / var(--total) * var(--feitas)); transform-origin: top center; }
  .case-b41__foto { min-height: 0; width: 100%; aspect-ratio: 16 / 9; }
  .clientes__cabeca { grid-template-columns: minmax(0, 1fr); }
  .clientes__grade { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .chamada-encaixe__interno, .configurador .previa, .por-que__cabeca, .para-quem, .pagina-topo__interno, .tecnologia__cabeca, .configurador__cabeca { grid-template-columns: minmax(0, 1fr); }
  .fluxo { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 40px; }
  .fluxo::before { display: none; }
  .pagina-topo__camadas { width: 100%; max-width: 440px; justify-self: center; }
  .por-que__lista { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .duvidas h2 { position: static; }
  .fornecedores { border-right: 0; border-bottom: 1px solid var(--linha); }
}

@media (max-width: 560px) {
  .clientes__grade { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .clientes__grupo ul { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 16px; }
  .fluxo { grid-template-columns: minmax(0, 1fr); }
  .corporativos__lista li { grid-template-columns: minmax(0, 1fr); }
  .provas { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .prova { flex-direction: row-reverse; align-items: baseline; justify-content: flex-end; gap: 16px; }
  .prova dd { flex: 0 0 auto; min-width: 2.1em; }
  .fachada { max-width: 240px; }
  .mosaico { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: minmax(76px, auto); gap: 6px; }
  .peca { padding: 10px; gap: 8px; }
  .peca .ic { width: 20px; height: 20px; }
  .peca__nome { font-size: 0.875rem; }
  .peca__fase { font-size: 0.6875rem; }
  .peca--projeto { padding: 16px; }
  .peca--projeto .ic { width: 28px; height: 28px; }
  .peca--projeto .peca__nome { font-size: 1.375rem; }
  .peca--projeto .peca__apoio { font-size: 0.875rem; }
  .peca--fim .peca__nome { font-size: 1.0625rem; }
  .montagem__etapas { grid-template-columns: repeat(4, minmax(0, 1fr)); row-gap: 2px; }
  .peca--larga { grid-column: span 1; }
  .peca--projeto, .peca--fim { grid-column: span 3; grid-row: span 1; }
  .ganhos__lista, .modelos__opcoes { grid-template-columns: minmax(0, 1fr); }
  .comparar__linhas div { grid-template-columns: 6.5em minmax(0, 1fr); gap: 10px; padding: 12px 16px; font-size: 0.9375rem; }
  .fornecedores { padding: 16px; gap: 10px; }
  .comparar__rotulo { display: none; }
  .fornecedores__mesa { min-height: 0; }
  .fornecedores__soltos { gap: 6px; }
  .fornecedores__soltos li { padding: 6px 10px; font-size: 0.875rem; }
  .fornecedores__um { padding: 12px 16px; }
  .fornecedores__um span { font-size: 1.25rem; }
  .comparar__chave button { font-size: 1rem; }
  .por-que__lista { grid-template-columns: minmax(0, 1fr); }
  .chamada-encaixe__hud { position: static; padding: 10px; border-top: 1px solid var(--cal-15); }
  .modulos__grupos { grid-template-columns: minmax(0, 1fr); }
  .acoes .botao { flex: 1 1 100%; }
  .rodape__legal, .rodape__restrito { margin-left: 0; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    animation-delay: 0ms !important;
    transition-duration: 1ms !important;
  }
  .faixa__trilho, .selo::before, .hud__ponto, .linha-b41 li.agora::before { animation: none; }
}

/* setas dos carrosséis e da galeria, desenhadas como ícone */
.ic-seta { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: square; }