/* GP | Arquitetura — estilos do site
   Identidade: papel quente, grafite e o tom #AB9C8E do monograma (as variáveis --latao* guardam esse tom). Detalhes de desenho técnico
   (cotas, carimbo, malha) e tipografia Archivo larga + IBM Plex Mono nos rótulos. */

:root {
  --papel: #f2efe9;
  --papel-2: #ebe6dd;
  --areia: #e3dccf;
  --branco: #fbfaf7;
  --tinta: #1b1a18;
  --texto-lead: #3a3732;
  --texto-2: #5e5a53;
  --texto-3: #7a766e;
  --linha: rgba(27, 26, 24, 0.13);
  --linha-forte: rgba(27, 26, 24, 0.32);
  --latao: #ab9c8e;
  --latao-escuro: #77695a;
  --latao-claro: #c7b8aa;
  --grafite: #1b1a18;
  --grafite-2: #23221f;

  /* Papéis de cor (trocam nas seções escuras) */
  --fundo: var(--papel);
  --texto: var(--tinta);
  --texto-sec: var(--texto-2);
  --traco: var(--linha);
  --traco-forte: var(--linha-forte);
  --acento: var(--latao-escuro);
  --cota-cor: #8d887f;

  --f-sans: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --f-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --larg: 1320px;
  --margem: clamp(20px, 4.2vw, 56px);
  --topo-h: 72px;
  --ease: cubic-bezier(0.2, 0.7, 0.1, 1);
  --ease-io: cubic-bezier(0.65, 0, 0.35, 1);

  interpolate-size: allow-keywords;
}

.escuro {
  --fundo: var(--grafite);
  --texto: #f2efe9;
  --texto-sec: #b9b3a8;
  --traco: rgba(242, 239, 233, 0.13);
  --traco-forte: rgba(242, 239, 233, 0.34);
  --acento: var(--latao-claro);
  --cota-cor: rgba(199, 184, 170, 0.75);
  background-color: var(--fundo);
  color: var(--texto);
}

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--topo-h) + 8px);
}

body {
  margin: 0;
  background-color: var(--papel);
  /* grão de papel, bem sutil */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .1 0 0 0 0 .09 0 0 0 0 .07 0 0 0 .045 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  color: var(--tinta);
  font-family: var(--f-sans);
  font-size: 1.0625rem;
  line-height: 1.6;
  font-weight: 400;
  font-stretch: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

img,
svg {
  display: block;
  max-width: 100%;
}

img {
  height: auto;
}

a {
  color: inherit;
}

button,
input,
textarea {
  font: inherit;
  color: inherit;
}

h1,
h2,
h3,
p,
ul,
ol,
dl,
dd,
figure,
blockquote,
fieldset {
  margin: 0;
}

ul,
ol {
  padding: 0;
  list-style: none;
}

::selection {
  background: var(--latao);
  color: var(--tinta);
}

:focus-visible {
  outline: 2px solid var(--latao);
  outline-offset: 3px;
}

.sr {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.wrap {
  width: 100%;
  max-width: calc(var(--larg) + 2 * var(--margem));
  margin-inline: auto;
  padding-inline: var(--margem);
}

.pular {
  position: absolute;
  left: 12px;
  top: -80px;
  z-index: 100;
  background: var(--tinta);
  color: var(--papel);
  padding: 10px 16px;
  text-decoration: none;
}

.pular:focus {
  top: 12px;
}

/* ---------- Tipografia ---------- */
.rotulo {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.55em 0.9em;
  font-family: var(--f-mono);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  line-height: 1.4;
  text-transform: uppercase;
  color: var(--texto-sec);
}

.rotulo .num {
  display: inline-flex;
  align-items: center;
  gap: 0.9em;
  color: var(--acento);
}

.rotulo .num::after {
  content: "";
  width: 32px;
  height: 1px;
  background: currentColor;
}

h2 {
  font-weight: 300;
  font-stretch: 112%;
  font-size: clamp(2.15rem, 1.15rem + 3.5vw, 4.25rem);
  line-height: 1.02;
  letter-spacing: -0.034em;
  text-wrap: balance;
}

h3 {
  font-weight: 500;
  font-stretch: 106%;
  font-size: 1.3rem;
  line-height: 1.2;
  letter-spacing: -0.012em;
}

.lead {
  font-size: clamp(1.12rem, 1rem + 0.42vw, 1.3rem);
  line-height: 1.5;
  color: var(--texto-lead);
  text-wrap: pretty;
}

.escuro .lead {
  color: #ddd7cc;
}

.estrelas {
  color: var(--latao);
  letter-spacing: 0.06em;
  font-size: 0.82em;
}

/* ---------- Botões e links ---------- */
.botao {
  --b-fundo: var(--tinta);
  --b-texto: var(--papel);
  --b-linha: var(--latao);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.65em;
  min-height: 52px;
  padding: 0.8em 1.45em;
  border: 1px solid var(--b-fundo);
  background: var(--b-fundo);
  color: var(--b-texto);
  font-size: 0.97rem;
  font-weight: 500;
  font-stretch: 104%;
  letter-spacing: 0.005em;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition:
    background-color 0.3s,
    color 0.3s,
    border-color 0.3s;
}

.botao::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: var(--b-linha);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.55s var(--ease);
}

.botao:hover::after,
.botao:focus-visible::after {
  transform: scaleX(1);
}

.botao .icone {
  width: 20px;
  height: 20px;
  flex: none;
  fill: currentColor;
}

.botao--latao {
  --b-fundo: var(--latao);
  --b-texto: var(--tinta);
  --b-linha: var(--tinta);
}

.botao--latao:hover {
  --b-fundo: #b6a799;
}

.botao--contorno {
  --b-fundo: transparent;
  --b-texto: var(--texto);
  border-color: var(--traco-forte);
}

.botao--contorno:hover {
  border-color: var(--texto);
}

.botao--topo {
  min-height: 42px;
  padding: 0.5em 1.05em;
  font-size: 0.9rem;
}

.botao--largo {
  width: 100%;
}

.link-seta {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  padding-block: 0.45em;
  font-weight: 500;
  text-decoration: none;
  background: linear-gradient(currentColor, currentColor) left bottom / 100% 1px no-repeat;
  transition: background-size 0.5s var(--ease);
}

.link-seta:hover {
  background-size: 40% 1px;
}

.seta {
  width: 26px;
  height: 12px;
  flex: none;
  transition: transform 0.4s var(--ease);
}

.link-seta:hover .seta,
.indice__item:hover .seta {
  transform: translateX(5px);
}

/* a mesma seta, apontando para trás (rotate compõe com o translate do hover) */
.seta--volta {
  rotate: 180deg;
}

.acoes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 26px;
}

/* ---------- Cota (linha de dimensão) ---------- */
.cota {
  position: relative;
  height: 30px;
  color: var(--cota-cor);
}

.cota::before,
.cota::after {
  content: "";
  position: absolute;
  bottom: 0;
  width: 1px;
  height: 15px;
  background: currentColor;
}

.cota::before {
  left: 0;
}

.cota::after {
  right: 0;
}

.cota__linha {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 6px;
  height: 1px;
  background: currentColor;
}

.cota__linha::before,
.cota__linha::after {
  content: "";
  position: absolute;
  top: -5px;
  width: 1px;
  height: 11px;
  background: currentColor;
  transform: rotate(45deg);
}

.cota__linha::before {
  left: 0;
}

.cota__linha::after {
  right: 0;
}

.cota__texto {
  position: absolute;
  left: 50%;
  bottom: 11px;
  transform: translateX(-50%);
  font-family: var(--f-mono);
  font-size: 0.74rem;
  font-weight: 500;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--texto-sec);
}

.js .cota {
  clip-path: inset(0 100% 0 0);
  transition: clip-path 0.8s var(--ease-io) calc(var(--i, 0) * 110ms + 60ms);
}

.js .visivel .cota,
.js .visivel.cota {
  clip-path: inset(0 0 0 0);
}

/* ---------- Topo (cabeçalho) ---------- */
.topo {
  position: sticky;
  top: 0;
  z-index: 50;
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s;
}

.topo::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-color: rgba(242, 239, 233, 0.86);
  -webkit-backdrop-filter: saturate(1.3) blur(14px);
  backdrop-filter: saturate(1.3) blur(14px);
}

.topo.rolou {
  border-bottom-color: var(--linha);
}

.topo.menu-aberto::before {
  background-color: var(--papel);
}

.topo__inner {
  height: var(--topo-h);
  display: flex;
  align-items: center;
  gap: 30px;
}

.marca {
  display: inline-flex;
  align-items: center;
  gap: 13px;
  margin-right: auto;
  text-decoration: none;
}

.marca__mono {
  width: 22px;
  height: 32px;
  fill: none;
  stroke: var(--tinta);
  stroke-width: 4.6;
}

.marca__nome,
.carimbo__nome {
  display: inline-flex;
  align-items: center;
  font-size: 0.8rem;
  font-weight: 400;
  font-stretch: 125%;
  letter-spacing: 0.27em;
  text-transform: uppercase;
  white-space: nowrap;
}

.marca__barra {
  display: inline-block;
  width: 1px;
  height: 1.15em;
  margin: 0 0.6em 0 0.33em;
  background: currentColor;
  opacity: 0.55;
}

.menu {
  display: flex;
  gap: 28px;
}

.menu a {
  position: relative;
  padding-block: 6px;
  font-size: 0.94rem;
  color: var(--texto-2);
  text-decoration: none;
  transition: color 0.25s;
}

.menu a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: var(--latao-escuro);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.45s var(--ease);
}

.menu a:hover {
  color: var(--tinta);
}

.menu a:hover::after,
.menu a.ativo::after {
  transform: scaleX(1);
}

.menu-botao {
  display: none;
  width: 44px;
  height: 44px;
  margin-right: -10px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  align-items: center;
  justify-content: center;
}

.menu-botao__linhas,
.menu-botao__linhas::before {
  display: block;
  width: 24px;
  height: 1.5px;
  background: var(--tinta);
  transition: transform 0.35s var(--ease);
}

.menu-botao__linhas {
  position: relative;
  transform: translateY(-4px);
}

.menu-botao__linhas::before {
  content: "";
  position: absolute;
  top: 8px;
}

.menu-botao[aria-expanded="true"] .menu-botao__linhas {
  transform: translateY(0) rotate(45deg);
}

.menu-botao[aria-expanded="true"] .menu-botao__linhas::before {
  transform: translateY(-8px) rotate(-90deg);
}

/* Menu do celular: a folha desce como uma persiana, os itens sobem por uma máscara
   e as linhas entre eles se desenham, como num papel de desenho. */
.menu-movel {
  position: fixed;
  inset: var(--topo-h) 0 0 0;
  z-index: 49;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--papel);
  border-top: 1px solid var(--linha);
  padding-block: 8px 40px;
  clip-path: inset(0 0 100% 0);
  transition: clip-path 0.38s var(--ease-io);
}

.menu-movel.aberto {
  clip-path: inset(0 0 0 0);
  transition-duration: 0.6s;
}

/* ao fechar, a folha sobe por cima dos itens (eles ficam parados, só são recolhidos) */
.menu-movel.aberto.fechando {
  clip-path: inset(0 0 100% 0);
  transition-duration: 0.38s;
}

.menu-movel nav {
  display: flex;
  flex-direction: column;
}

.menu-movel__item {
  position: relative;
  display: flex;
  align-items: baseline;
  gap: 16px;
  padding: 18px 0;
  overflow: hidden;
  font-size: 1.9rem;
  font-weight: 300;
  font-stretch: 112%;
  letter-spacing: -0.02em;
  text-decoration: none;
}

.menu-movel__item::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: var(--linha-forte);
  transform: scaleX(0);
  transform-origin: left;
}

.menu-movel__num {
  font-family: var(--f-mono);
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  color: var(--latao-escuro);
  opacity: 0;
}

.menu-movel__txt {
  display: inline-block;
  transform: translateY(115%);
}

.menu-movel__cta,
.menu-movel__rodape {
  opacity: 0;
  transform: translateY(10px);
}

.menu-movel__cta {
  margin-top: 28px;
}

.menu-movel__rodape {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin-top: 24px;
  font-family: var(--f-mono);
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  color: var(--texto-2);
}

.menu-movel__rodape a {
  text-decoration: none;
}

.menu-movel.aberto .menu-movel__item::after {
  transform: none;
  transition: transform 0.7s var(--ease-io) calc(var(--i) * 55ms + 0.18s);
}

.menu-movel.aberto .menu-movel__num {
  opacity: 1;
  transition: opacity 0.5s var(--ease) calc(var(--i) * 55ms + 0.3s);
}

.menu-movel.aberto .menu-movel__txt {
  transform: none;
  transition: transform 0.7s var(--ease) calc(var(--i) * 55ms + 0.14s);
}

.menu-movel.aberto .menu-movel__cta,
.menu-movel.aberto .menu-movel__rodape {
  opacity: 1;
  transform: none;
  transition:
    opacity 0.5s var(--ease) 0.42s,
    transform 0.6s var(--ease) 0.42s,
    background-color 0.3s,
    color 0.3s;
}

.menu-movel.aberto .menu-movel__rodape {
  transition-delay: 0.5s;
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  padding-top: clamp(26px, 4.5vw, 64px);
  padding-bottom: clamp(56px, 7vw, 96px);
  overflow: clip;
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(to right, rgba(27, 26, 24, 0.06) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(27, 26, 24, 0.06) 1px, transparent 1px),
    linear-gradient(to right, rgba(27, 26, 24, 0.03) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(27, 26, 24, 0.03) 1px, transparent 1px);
  background-size:
    192px 192px,
    192px 192px,
    48px 48px,
    48px 48px;
  background-position: center top;
  -webkit-mask-image: radial-gradient(ellipse 75% 70% at 70% 30%, #000 20%, transparent 75%);
  mask-image: radial-gradient(ellipse 75% 70% at 70% 30%, #000 20%, transparent 75%);
}

.hero__grade {
  position: relative;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-template-areas:
    "rot rot rot rot rot rot . maq maq maq maq maq"
    "tit tit tit tit tit tit tit maq maq maq maq maq"
    "txt txt txt txt txt txt . maq maq maq maq maq"
    "pro pro pro pro pro pro . maq maq maq maq maq";
  grid-template-rows: auto auto auto 1fr;
  column-gap: 24px;
  row-gap: 30px;
}

.hero__rotulo {
  grid-area: rot;
}

.hero__local {
  display: inline-flex;
  align-items: center;
  gap: 0.9em;
  color: var(--latao-escuro);
}

.hero__local::before {
  content: "";
  width: 22px;
  height: 1px;
  background: currentColor;
}

.hero__titulo {
  grid-area: tit;
  position: relative;
  z-index: 2;
  font-weight: 300;
  font-stretch: 116%;
  font-size: clamp(3.3rem, 0.9rem + 7.1vw, 8.6rem);
  line-height: 0.9;
  letter-spacing: -0.048em;
}

.hero__titulo .linha {
  display: block;
  overflow: hidden;
  padding-bottom: 0.08em;
  margin-bottom: -0.08em;
}

.hero__titulo .linha > span {
  display: inline-block;
}

.hero__texto {
  grid-area: txt;
  display: grid;
  gap: 26px;
  max-width: 560px;
}

.provas {
  grid-area: pro;
  align-self: start;
  display: flex;
  max-width: 600px;
  border-top: 1px solid var(--linha);
}

.provas li {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 16px 16px 0 0;
  font-size: 0.86rem;
  line-height: 1.35;
  color: var(--texto-2);
}

.provas li + li {
  padding-left: 16px;
  border-left: 1px solid var(--linha);
}

.provas strong {
  font-size: 1.12rem;
  font-weight: 500;
  font-stretch: 108%;
  letter-spacing: -0.01em;
  color: var(--tinta);
  white-space: nowrap;
}

.hero__maquete {
  grid-area: maq;
  align-self: center;
  position: relative;
}

.marca-registro {
  position: absolute;
  width: 14px;
  height: 14px;
  pointer-events: none;
  opacity: 0.5;
}

.marca-registro::before,
.marca-registro::after {
  content: "";
  position: absolute;
  background: var(--tinta);
}

.marca-registro::before {
  left: 6.5px;
  top: 0;
  width: 1px;
  height: 14px;
}

.marca-registro::after {
  top: 6.5px;
  left: 0;
  width: 14px;
  height: 1px;
}

.marca-registro--a {
  top: -20px;
  right: -6px;
}

.marca-registro--b {
  bottom: -14px;
  left: -26px;
}

/* Entrada da página: começa já no primeiro quadro (não espera fonte nem script) e termina
   em menos de um segundo. O título sobe por trás de uma máscara; o resto só aparece. */
@keyframes gp-sobe {
  from {
    transform: translateY(104%);
  }
}

@keyframes gp-surge {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
}

@keyframes gp-aparece {
  from {
    opacity: 0;
  }
}

.entra {
  animation: gp-surge 0.6s var(--ease) both;
  animation-delay: calc(var(--i, 0) * 70ms + 180ms);
}

.hero__titulo .entra {
  animation: gp-sobe 0.9s var(--ease) both;
  animation-delay: calc(var(--i, 0) * 80ms - 40ms);
}

.hero__maquete.entra {
  animation-name: gp-aparece;
  animation-duration: 0.8s;
}

/* ---------- Maquete 3D ---------- */
html:not(.js) .hero__maquete {
  display: none;
}

.maquete {
  position: relative;
  height: clamp(300px, 30vw, 450px);
  touch-action: pan-y;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.maquete.arrastando {
  cursor: grabbing;
}

.maquete::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 55%;
  width: 86%;
  height: 42%;
  transform: translate(-50%, -50%);
  background: radial-gradient(closest-side, rgba(27, 26, 24, 0.13), rgba(27, 26, 24, 0.04) 62%, transparent);
  opacity: 0;
  transition: opacity 1.2s var(--ease) 0.4s;
  pointer-events: none;
}

.maquete[data-vista="3d"]::before {
  opacity: 1;
}

.maquete__palco {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 900px;
  height: 720px;
  margin: -360px 0 0 -450px;
  transform-style: preserve-3d;
  transform: scale(0.4);
  pointer-events: none;
}

.mq-piso,
.mq-area,
.mq-sombras,
.mq-rotulo,
.mq-medida,
.mq-caixa {
  position: absolute;
}

.mq-piso {
  left: 0;
  top: 0;
  width: 900px;
  height: 600px;
  background-color: #e6d8bf;
  transition: background-color 0.9s var(--ease) 0.25s;
}

.mq-piso::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(90deg, rgba(110, 80, 40, 0.09) 0 1px, transparent 1px 22px);
  transition: opacity 0.9s var(--ease) 0.25s;
}

.mq-area {
  transform: translateZ(0.3px);
  transition:
    background-color 0.9s var(--ease) 0.25s,
    box-shadow 0.9s var(--ease) 0.25s;
}

.mq-area--banho {
  background-color: #e6e4de;
  background-image:
    linear-gradient(90deg, rgba(0, 0, 0, 0.07) 1px, transparent 1px),
    linear-gradient(0deg, rgba(0, 0, 0, 0.07) 1px, transparent 1px);
  background-size: 30px 30px;
}

.mq-area--box {
  background-color: #d5d2cb;
}

.mq-area--deck {
  background-color: #c9ad80;
  background-image: repeating-linear-gradient(0deg, rgba(80, 50, 20, 0.14) 0 1px, transparent 1px 15px);
}

.mq-area--tapete {
  background-color: #d8d1c4;
  box-shadow: inset 0 0 0 8px #cbc3b4;
}

.mq-sombras {
  left: 0;
  top: 0;
  width: 900px;
  height: 720px;
  transform: translateZ(0.6px);
  transition: opacity 0.8s var(--ease) 0.9s;
}

.mq-rotulo {
  transform: translate(-50%, -50%) translateZ(1.5px);
  font-family: var(--f-mono);
  font-size: 22px;
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: 0.16em;
  text-align: center;
  text-transform: uppercase;
  white-space: nowrap;
  color: #6c5e4f;
}

.mq-rotulo small {
  display: block;
  margin-top: 3px;
  font-size: 17px;
  font-weight: 400;
  letter-spacing: 0.06em;
  text-transform: none;
  color: #6b675f;
}

.mq-medida {
  height: 22px;
  color: #7d786e;
}

.mq-medida::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 10px;
  height: 2px;
  background: currentColor;
}

.mq-medida i {
  position: absolute;
  top: 0;
  width: 2px;
  height: 22px;
  background: currentColor;
  transform: rotate(45deg);
}

.mq-medida i:first-child {
  left: -1px;
}

.mq-medida i:last-child {
  right: -1px;
}

.mq-medida span {
  position: absolute;
  left: 50%;
  bottom: 100%;
  transform: translateX(-50%);
  padding-bottom: 2px;
  font-family: var(--f-mono);
  font-size: 20px;
  letter-spacing: 0.05em;
  white-space: nowrap;
}

/* Cada móvel ou parede é uma caixa de 5 faces que "sobe" do chão (scaleZ). */
.mq-caixa {
  transform-style: preserve-3d;
  transform: scaleZ(var(--z, 1)) translateZ(var(--z0, 1px));
  transition: transform 0.95s var(--ease) var(--ds, 0ms);
}

.mq-face {
  position: absolute;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  background-color: var(--cor, #f4f1ea);
  background-image: linear-gradient(var(--sombra, transparent), var(--sombra, transparent));
  transition:
    background-color 0.8s var(--ease),
    box-shadow 0.8s var(--ease);
  transition-delay: inherit;
}

.mq-topo {
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  transform: translateZ(var(--h));
  background-color: var(--cor-topo, var(--cor, #f4f1ea));
}

.mq-fs {
  left: 0;
  width: 100%;
  height: var(--h);
  top: calc(100% - var(--h));
  transform-origin: 50% 100%;
  transform: rotateX(-90deg);
  --sombra: rgba(45, 35, 22, 0.05);
}

.mq-fn {
  left: 0;
  top: 0;
  width: 100%;
  height: var(--h);
  transform-origin: 50% 0;
  transform: rotateX(90deg);
  --sombra: rgba(45, 35, 22, 0.2);
}

.mq-fo {
  top: 0;
  left: 0;
  height: 100%;
  width: var(--h);
  transform-origin: 0 50%;
  transform: rotateY(-90deg);
  --sombra: rgba(45, 35, 22, 0.1);
}

.mq-fl {
  top: 0;
  height: 100%;
  width: var(--h);
  left: calc(100% - var(--h));
  transform-origin: 100% 50%;
  transform: rotateY(90deg);
  --sombra: rgba(45, 35, 22, 0.16);
}

/* materiais */
.mq-parede {
  --cor: #f7f5f0;
  --cor-topo: #2a2926;
}

.mq-peitoril {
  --cor: #eeeae2;
  --cor-topo: #c4bfb4;
}

.mq-vidro .mq-face {
  background-color: rgba(170, 196, 204, 0.3);
  background-image: none;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.55);
}

.mq-vidro .mq-topo {
  background-color: rgba(110, 132, 140, 0.55);
}

.mq-branco {
  --cor: #f3f0e9;
  --cor-topo: #fbfaf7;
}

.mq-madeira {
  --cor: #c49e69;
  --cor-topo: #d1ad79;
}

.mq-ilha {
  --cor: #c49e69;
  --cor-topo: #ece8e0;
}

.mq-pedra {
  --cor: #f1eee7;
  --cor-topo: #dcd8cf;
}

.mq-armario {
  --cor: #ebe7de;
  --cor-topo: #ddd7ca;
}

.mq-escuro {
  --cor: #3a3833;
  --cor-topo: #4a4740;
}

.mq-tecido {
  --cor: #dad3c5;
  --cor-topo: #e6e0d4;
}

.mq-tecido-escuro {
  --cor: #8b8374;
  --cor-topo: #9b9384;
}

.mq-latao {
  --cor: #ab9c8e;
  --cor-topo: #b9aa9c;
}

.mq-inox {
  --cor: #cdd0cf;
  --cor-topo: #dfe1df;
}

.mq-planta {
  --cor: #b49d74;
  --cor-topo: #71895c;
}

.mq-planta .mq-topo {
  border-radius: 50%;
  transform: translateZ(var(--h)) scale(1.4);
}

/* Na planta, tudo vira desenho: paredes cortadas em preto, móveis em traço. */
.maquete[data-vista="planta"] .mq-caixa {
  --z: 0.015;
  transition-delay: var(--dd, 0ms);
}

.maquete[data-vista="planta"] .mq-face {
  background-color: #fbfaf7;
  background-image: none;
  box-shadow: inset 0 0 0 2px rgba(27, 26, 24, 0.5);
}

.maquete[data-vista="planta"] .mq-parede .mq-face {
  background-color: #2a2926;
  box-shadow: none;
}

.maquete[data-vista="planta"] .mq-vidro .mq-face {
  background-color: rgba(96, 118, 126, 0.75);
  box-shadow: none;
}

.maquete[data-vista="planta"] .mq-piso,
.maquete[data-vista="planta"] .mq-area {
  background-color: #fbfaf7;
  transition-delay: 0s;
}

.maquete[data-vista="planta"] .mq-area--box {
  background-color: #efede7;
}

.maquete[data-vista="planta"] .mq-area--tapete {
  box-shadow: inset 0 0 0 2px rgba(27, 26, 24, 0.3);
}

.maquete[data-vista="planta"] .mq-piso::before,
.maquete[data-vista="planta"] .mq-sombras {
  opacity: 0;
  transition-delay: 0s;
}

.maquete__controles {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 20px;
  margin-top: 6px;
}

.segmento {
  display: inline-flex;
  border: 1px solid var(--linha-forte);
  padding: 3px;
  background: rgba(251, 250, 247, 0.6);
}

.segmento button {
  min-height: 36px;
  padding: 6px 14px;
  border: 0;
  background: transparent;
  font-size: 0.86rem;
  font-weight: 500;
  cursor: pointer;
  color: var(--texto-2);
  transition:
    background-color 0.3s,
    color 0.3s;
}

.segmento button[aria-pressed="true"] {
  background: var(--tinta);
  color: var(--papel);
}

.maquete__dica {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--f-mono);
  font-size: 0.76rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--texto-2);
}

.maquete__dica svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: var(--latao-escuro);
  stroke-width: 1.5;
}

.maquete__legenda {
  margin-top: 10px;
  font-family: var(--f-mono);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--texto-3);
}

/* ---------- Sequência (planta → 3D → obra → entrega) ---------- */
.sequencia {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: clamp(48px, 6vw, 80px) -9px 0;
}

.sequencia__item figure {
  padding: 14px 9px 0;
}

.sequencia__item {
  --atraso: calc(var(--i, 0) * 170ms);
}

.sequencia__item figcaption {
  margin-top: 12px;
  font-size: 0.92rem;
  color: var(--texto-2);
}

/* Os 4 desenhos (ferramentas/desenhar_sequencia.py): a mesma sala em planta, maquete, obra e pronta. */
.seq-desenho {
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  background: var(--branco);
  border: 1px solid var(--linha);
}

.seq-desenho .f,
.seq-desenho .l {
  stroke: var(--seq-traco, #2a2926);
  stroke-width: 2;
  stroke-linejoin: round;
  stroke-linecap: round;
  stroke-dasharray: 1 1; /* cada traço tem pathLength="1": dá para "desenhar" do começo ao fim */
}

.seq-desenho .l {
  fill: none;
}

.seq-desenho .fino {
  stroke-width: 1.4;
}

.seq-desenho .bloco {
  stroke-width: 1;
  stroke-opacity: 0.4;
}

.seq-desenho .tabua {
  stroke: rgba(110, 80, 40, 0.22);
  stroke-width: 1;
}

.seq-desenho .haste {
  stroke-width: 2.6;
}

.seq-desenho .escada {
  stroke: var(--latao-escuro);
  stroke-width: 2.8;
}

.seq-desenho .cota {
  stroke: var(--cota-cor);
  stroke-width: 1.6;
}

.seq-desenho .tracejado,
.seq-desenho .obra-marca {
  fill: none;
  stroke-width: 1.6;
  stroke-dasharray: 9 7;
}

.seq-desenho .tracejado {
  stroke: rgba(42, 41, 38, 0.55);
}

.seq-desenho .obra-marca {
  stroke: var(--latao);
  stroke-width: 2.2;
}

.seq-desenho text {
  font-family: var(--f-mono);
  text-anchor: middle;
  fill: var(--texto-2);
}

.seq-desenho .seq-cota {
  font-size: 20px;
  letter-spacing: 0.04em;
  fill: var(--cota-cor);
}

.seq-desenho .seq-nome {
  font-size: 22px;
  font-weight: 500;
  letter-spacing: 0.14em;
}

.seq-desenho .seq-area {
  font-size: 18px;
}

.seq-desenho--entrega {
  --seq-traco: rgba(42, 41, 38, 0.45);
}

/* Ao aparecer, cada desenho é traçado e depois "pintado", um depois do outro. */
.js .sequencia .f,
.js .sequencia .l {
  stroke-dashoffset: 1;
}

.js .sequencia .f {
  fill-opacity: 0;
}

.js .sequencia .x {
  opacity: 0;
}

.js .sequencia.visivel .f,
.js .sequencia.visivel .l {
  stroke-dashoffset: 0;
  fill-opacity: 1;
  transition:
    stroke-dashoffset 1.1s var(--ease-io) var(--atraso),
    fill-opacity 0.7s var(--ease) calc(var(--atraso) + 0.55s);
}

.js .sequencia.visivel .x {
  opacity: 1;
  transition: opacity 0.6s var(--ease) calc(var(--atraso) + 0.85s);
}

/* ---------- Clientes ---------- */
.clientes {
  border-block: 1px solid var(--linha);
  padding-block: 20px;
}

.clientes__grade {
  display: flex;
  align-items: center;
  gap: 36px;
}

.clientes .rotulo {
  flex: none;
}

.letreiro {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}

.letreiro__trilho {
  display: flex;
  width: max-content;
  animation: letreiro 70s linear infinite;
}

.letreiro:hover .letreiro__trilho {
  animation-play-state: paused;
}

.letreiro__trilho li {
  position: relative;
  padding-inline: 1.5em;
  font-size: 1.05rem;
  font-stretch: 118%;
  letter-spacing: 0.01em;
  white-space: nowrap;
  color: var(--texto-2);
}

.letreiro__trilho li::after {
  content: "/";
  position: absolute;
  right: -0.15em;
  color: var(--latao);
}

@keyframes letreiro {
  to {
    transform: translateX(-50%);
  }
}

/* ---------- Seções ---------- */
.secao {
  position: relative;
  padding-block: clamp(80px, 9.5vw, 148px);
}

.secao__cabeca {
  display: grid;
  gap: 20px;
  max-width: 900px;
  margin-bottom: clamp(40px, 5vw, 68px);
}

.secao__cabeca--lado {
  max-width: none;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 28px 48px;
}

.secao__cabeca--lado > div:first-child {
  display: grid;
  gap: 20px;
}

.secao__intro {
  max-width: 56ch;
  font-size: 1.1rem;
  color: var(--texto-sec);
}

/* [data-revelar] não esconde mais texto: o texto já está lá quando a pessoa chega.
   A classe .visivel (posta pelo JS) só dispara os traços que se desenham (cotas, desenhos). */

/* ---------- Serviços (índice) ---------- */
.indice {
  border-top: 1px solid var(--traco-forte);
}

.indice__item {
  position: relative;
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr) auto;
  gap: 8px 32px;
  padding: 32px 0 30px;
  border-bottom: 1px solid var(--traco);
}

/* ao passar o mouse, uma linha de latão se desenha sobre a divisória */
.indice__item::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 1px;
  background: var(--latao);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.55s var(--ease-io);
  pointer-events: none;
}

.indice__item:hover::after,
.indice__item:focus-within::after {
  transform: none;
  transform-origin: left;
}

.indice__num {
  padding-top: 0.7em;
  font-family: var(--f-mono);
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--acento);
}

.indice__corpo {
  display: grid;
  gap: 10px;
}

.indice__corpo h3 {
  font-size: clamp(1.45rem, 1rem + 1.35vw, 2.15rem);
  font-weight: 300;
  font-stretch: 112%;
  letter-spacing: -0.028em;
  line-height: 1.1;
  transition: transform 0.5s var(--ease);
}

.indice__item:hover h3 {
  transform: translateX(8px);
}

.indice__corpo p {
  max-width: 62ch;
  color: var(--texto-sec);
}

.indice__corpo .indice__tags {
  font-family: var(--f-mono);
  font-size: 0.76rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--latao-escuro);
}

.indice__cta {
  align-self: center;
  display: inline-flex;
  align-items: center;
  gap: 0.65em;
  padding: 14px 0 14px 24px;
  border-left: 1px solid var(--traco);
  font-size: 0.95rem;
  font-weight: 500;
  white-space: nowrap;
  text-decoration: none;
}

/* ---------- Projetos (galeria) ---------- */
.filtros,
.ad__casos {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.filtros {
  justify-content: flex-end;
  max-width: 640px;
}

.filtros button,
.ad__casos button {
  min-height: 40px;
  padding: 8px 15px;
  border: 1px solid var(--traco-forte);
  background: transparent;
  font-size: 0.88rem;
  cursor: pointer;
  transition:
    background-color 0.25s,
    color 0.25s,
    border-color 0.25s;
}

.filtros button:hover,
.ad__casos button:hover {
  border-color: var(--texto);
}

.filtros button[aria-pressed="true"],
.ad__casos button[aria-pressed="true"] {
  background: var(--tinta);
  border-color: var(--tinta);
  color: var(--papel);
}

/* Fileiras justificadas: cada foto cresce na proporção dela (--r = largura / altura),
   então as fotos de uma mesma fileira ficam com a mesma altura, sem cortar nenhuma.
   Como a ordem é por fileira, o "ver mais" acrescenta fotos embaixo sem embaralhar as de cima. */
.galeria {
  --galeria-h: 250px;
  display: flex;
  flex-wrap: wrap;
  gap: 34px 22px;
}

.galeria::after {
  content: "";
  flex: 1000 1 0;
}

/* galeria recolhida terminando numa fileira completa: essa fileira também é justificada */
.galeria--justa::after {
  display: none;
}

.galeria__item {
  flex: var(--r, 1.4) 1 calc(var(--r, 1.4) * var(--galeria-h));
  min-width: 0;
  container-type: inline-size;
}

.galeria__item[hidden] {
  display: none;
}

.galeria__item.surge {
  animation: surge 0.6s var(--ease) both;
}

@keyframes surge {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
}

.galeria__abrir {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  overflow: hidden;
  background: var(--areia);
  cursor: zoom-in;
}

.galeria__abrir img {
  width: 100%;
  transition: transform 1s var(--ease);
}

.galeria__abrir:hover img {
  transform: scale(1.04);
}

/* marcas de corte nos cantos ao passar o mouse */
.galeria__abrir::before,
.galeria__abrir::after {
  content: "";
  position: absolute;
  width: 18px;
  height: 18px;
  z-index: 2;
  opacity: 0;
  transition:
    opacity 0.35s,
    transform 0.45s var(--ease);
}

.galeria__abrir::before {
  top: 10px;
  left: 10px;
  border-top: 1px solid #fff;
  border-left: 1px solid #fff;
  transform: translate(6px, 6px);
}

.galeria__abrir::after {
  right: 10px;
  bottom: 10px;
  border-right: 1px solid #fff;
  border-bottom: 1px solid #fff;
  transform: translate(-6px, -6px);
}

.galeria__abrir:hover::before,
.galeria__abrir:hover::after,
.galeria__abrir:focus-visible::before,
.galeria__abrir:focus-visible::after {
  opacity: 1;
  transform: none;
}

.galeria__legenda {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 14px;
  margin-top: 11px;
  font-size: 0.93rem;
  line-height: 1.35;
}

.galeria__legenda span:first-child {
  font-weight: 500;
}

.galeria__legenda span:last-child {
  font-family: var(--f-mono);
  font-size: 0.72rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-align: right;
  color: var(--texto-sec);
}

/* foto estreita: legenda empilhada */
@container (max-width: 420px) {
  .galeria__legenda {
    flex-direction: column;
    gap: 3px;
  }

  .galeria__legenda span:last-child {
    text-align: left;
  }
}

.galeria__mais {
  display: flex;
  justify-content: center;
  margin-top: 40px;
}

.galeria__mais[hidden] {
  display: none;
}

.galeria__resto {
  font-family: var(--f-mono);
  font-size: 0.8rem;
  font-weight: 400;
  letter-spacing: 0.04em;
  color: var(--texto-sec);
}

.projetos__rodape {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px 32px;
  margin-top: 28px;
  padding-top: 30px;
  border-top: 1px solid var(--traco);
}

.projetos__rodape > p {
  font-size: 1.1rem;
  color: var(--texto-sec);
}

/* ---------- Antes e depois ---------- */
.antes-depois {
  background-color: var(--papel-2);
}

.ad {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 40px 24px;
  align-items: center;
}

.ad__texto {
  grid-column: 1 / 5;
  display: grid;
  gap: 20px;
}

.ad__texto > p:not(.rotulo) {
  color: var(--texto-sec);
}

.ad__casos {
  margin-top: 8px;
}

.ad__quadro {
  grid-column: 6 / 13;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 16px 26px;
  align-items: start;
}

.ad__quadro > .ad__fotos {
  grid-column: 1 / -1;
}

.ad__fotos {
  position: relative;
  width: min(100%, calc(70vh * var(--proporcao, 1.6)));
  aspect-ratio: var(--proporcao, 1.6);
  margin-inline: auto;
  overflow: hidden;
  background: var(--areia);
  transition: aspect-ratio 0.6s var(--ease);
}

/* As fotos ficam empilhadas na ordem das etapas (antes → projeto → obra).
   Avançar uma etapa "abre" a foto de cima da direita para a esquerda. */
.ad__foto {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  clip-path: inset(0 0 0 0);
  transition: clip-path 0.95s var(--ease-io);
}

.ad__foto[data-oculta] {
  clip-path: inset(0 0 0 100%);
}

/* linha de latão que acompanha a borda da foto durante a troca (animada pelo JS) */
.ad__linha {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: 3;
  width: 2px;
  background: var(--latao);
  transform: translateX(-4px);
  pointer-events: none;
}

.ad__etiqueta {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 4;
  padding: 6px 10px 5px;
  background: rgba(251, 250, 247, 0.93);
  color: var(--tinta);
  font-family: var(--f-mono);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  line-height: 1.2;
  text-transform: uppercase;
  pointer-events: none;
}

.ad__etiqueta:empty {
  display: none;
}

.ad__etiqueta.nova {
  animation: etiqueta 0.45s var(--ease);
}

@keyframes etiqueta {
  from {
    opacity: 0;
    transform: translateY(-5px);
  }
}

.ad__fotos.sem-transicao .ad__foto {
  transition: none !important;
}

.ad__fotos.trocando .ad__foto {
  animation: troca 0.5s var(--ease);
}

@keyframes troca {
  from {
    opacity: 0;
  }
}

.ad__alternar {
  display: inline-flex;
  border: 1px solid var(--linha-forte);
  padding: 3px;
}

.ad__alternar button {
  min-height: 40px;
  min-width: 96px;
  padding: 6px 18px;
  border: 0;
  background: transparent;
  font-weight: 500;
  cursor: pointer;
  transition:
    background-color 0.3s,
    color 0.3s;
}

.ad__alternar button[aria-pressed="true"] {
  background: var(--tinta);
  color: var(--papel);
}

.ad__legenda {
  display: grid;
  gap: 6px;
  padding-top: 3px;
  font-family: var(--f-mono);
  font-size: 0.74rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--texto-2);
  transition: opacity 0.25s;
}

/* o comentário do arquiteto sobre cada caso, em uma ou duas linhas */
.ad__nota {
  max-width: 52ch;
  font-family: var(--f-sans);
  font-size: 0.95rem;
  letter-spacing: 0;
  line-height: 1.45;
  text-transform: none;
  color: var(--texto-sec);
}

.ad__nota:empty {
  display: none;
}

.ad__legenda.trocando {
  opacity: 0;
  transition-duration: 0.12s;
}

/* enquanto a foto da etapa ainda está chegando */
.ad__fotos::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 5;
  height: 2px;
  background: var(--latao);
  transform: scaleX(0);
  transform-origin: left;
  opacity: 0;
  pointer-events: none;
}

.ad__fotos.esperando::after {
  opacity: 1;
  animation: carregando 1.1s var(--ease-io) infinite;
}

@keyframes carregando {
  0% {
    transform: scaleX(0);
    transform-origin: left;
  }
  50% {
    transform: scaleX(1);
    transform-origin: left;
  }
  50.1% {
    transform-origin: right;
  }
  100% {
    transform: scaleX(0);
    transform-origin: right;
  }
}

/* ---------- Como trabalhamos ---------- */
.etapas {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.etapa {
  display: grid;
  align-content: start;
  gap: 14px;
  padding-right: 26px;
}

.etapa .cota {
  margin-bottom: 14px;
  margin-right: -26px;
}

.etapa:last-child .cota {
  margin-right: 0;
}

.etapa .cota__texto {
  color: var(--latao-claro);
}

.etapa h3 {
  font-size: 1.4rem;
  font-weight: 400;
  font-stretch: 110%;
  letter-spacing: -0.02em;
}

.etapa p {
  font-size: 0.98rem;
  color: var(--texto-sec);
}

.processo__rodape {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 22px 36px;
  margin-top: clamp(52px, 6vw, 84px);
  padding-top: 32px;
  border-top: 1px solid var(--traco);
}

.processo__rodape p {
  max-width: 52ch;
  font-size: 1.1rem;
  color: var(--texto-sec);
}

/* ---------- Sobre ---------- */
.sobre__grade {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 56px 24px;
  align-items: center;
}

.sobre__painel {
  grid-column: 1 / 6;
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  display: flex;
  align-items: flex-end;
  padding: clamp(24px, 3vw, 40px);
  background-color: var(--grafite);
  background-image:
    linear-gradient(to right, rgba(199, 184, 170, 0.07) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(199, 184, 170, 0.07) 1px, transparent 1px);
  background-size: 40px 40px;
  color: var(--papel);
}

.sobre__desenho {
  position: absolute;
  left: 50%;
  top: 11%;
  width: 46%;
  transform: translateX(-50%);
  overflow: visible;
  fill: none;
  stroke: var(--latao);
  stroke-width: 1.1;
}

.js .sobre__desenho path {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 2.6s var(--ease-io) 0.3s;
}

.js .sobre__painel.visivel .sobre__desenho path {
  stroke-dashoffset: 0;
}

.sobre__assinatura {
  position: relative;
  display: grid;
  gap: 6px;
}

.sobre__assinatura strong {
  font-size: 1.5rem;
  font-weight: 300;
  font-stretch: 116%;
  letter-spacing: -0.02em;
}

.sobre__assinatura span {
  font-family: var(--f-mono);
  font-size: 0.76rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--latao-claro);
}

.sobre__texto {
  grid-column: 7 / 13;
  display: grid;
  gap: 22px;
}

.sobre__texto > p:not(.rotulo):not(.lead) {
  color: var(--texto-sec);
}

.pilares {
  grid-column: 1 / 13;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 28px 24px;
  padding-top: 30px;
  border-top: 1px solid var(--traco-forte);
}

.pilares li {
  display: grid;
  align-content: start;
  gap: 10px;
}

.pilares__num {
  font-family: var(--f-mono);
  font-size: 0.85rem;
  color: var(--acento);
}

.pilares h3 {
  font-size: 1.16rem;
}

.pilares p {
  font-size: 0.97rem;
  color: var(--texto-sec);
}

/* ---------- Depoimentos ---------- */
.nota-google {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  padding: 14px 20px;
  border: 1px solid var(--traco-forte);
  text-decoration: none;
  transition: border-color 0.3s;
}

.nota-google:hover {
  border-color: var(--texto);
}

.nota-google__nota {
  font-size: 2.4rem;
  font-weight: 300;
  font-stretch: 112%;
  line-height: 1;
  letter-spacing: -0.03em;
}

.nota-google__info {
  display: grid;
  gap: 2px;
  font-size: 0.86rem;
  color: var(--texto-sec);
}

/* Carrossel: rola de lado com o dedo, com o mouse (arrastando) e pelas setas.
   --por-vez = quantos cartões cabem na largura (3 no computador, 2 no tablet, 1 e um pedaço no celular). */
.carrossel {
  --por-vez: 3;
  --vao: 20px;
}

.depos {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - (var(--por-vez) - 1) * var(--vao)) / var(--por-vez));
  gap: var(--vao);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  cursor: grab;
}

.depos::-webkit-scrollbar {
  display: none;
}

.depos:focus-visible {
  outline: 1px solid var(--latao);
  outline-offset: 6px;
}

.depos.arrastando {
  cursor: grabbing;
  scroll-snap-type: none;
  user-select: none;
}

.depos.arrastando .depo {
  pointer-events: none;
}

.depo {
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 26px;
  padding: 28px 28px 30px;
  border: 1px solid var(--traco);
  border-top-color: var(--traco-forte);
  background: var(--branco);
}

.carrossel__controles {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 26px;
}

.carrossel__contador {
  min-width: 10.5ch;
  font-family: var(--f-mono);
  font-size: 0.8rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.06em;
  color: var(--texto-sec);
}

.carrossel__contador span:first-child {
  color: var(--texto);
}

/* a barra é uma régua: o trecho escuro mostra quais depoimentos estão à vista */
.carrossel__barra {
  position: relative;
  flex: 1 1 auto;
  height: 1px;
  margin-right: 14px;
  background: var(--traco-forte);
}

.carrossel__barra > span {
  position: absolute;
  top: -1px;
  left: var(--prog-ini, 0%);
  width: var(--prog-larg, 50%);
  height: 3px;
  background: var(--texto);
}

.carrossel__botao {
  display: grid;
  place-items: center;
  width: 50px;
  height: 50px;
  flex: none;
  padding: 0;
  border: 1px solid var(--traco-forte);
  background: transparent;
  color: var(--texto);
  cursor: pointer;
  transition:
    background-color 0.25s,
    border-color 0.25s,
    color 0.25s,
    opacity 0.25s;
}

.carrossel__botao:hover:not(:disabled) {
  background: var(--tinta);
  border-color: var(--tinta);
  color: var(--papel);
}

.carrossel__botao:disabled {
  opacity: 0.3;
  cursor: default;
}

.carrossel__botao .seta {
  width: 22px;
}

.depo blockquote {
  position: relative;
}

.depo blockquote::before {
  content: "“";
  display: block;
  height: 0.5em;
  margin-bottom: 12px;
  font-size: 3.4rem;
  font-weight: 300;
  line-height: 1;
  color: var(--latao);
}

.depo blockquote p {
  font-size: 1.06rem;
  line-height: 1.55;
  text-wrap: pretty;
}

.depo__autor {
  display: grid;
  gap: 3px;
}

.depo__autor strong {
  font-weight: 500;
}

.depo__autor span {
  font-family: var(--f-mono);
  font-size: 0.72rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--texto-sec);
}

/* ---------- Dúvidas ---------- */
.faq {
  background-color: var(--papel-2);
}

.faq__grade {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 32px 24px;
  align-items: start;
}

.faq .secao__cabeca {
  grid-column: 1 / 5;
  position: sticky;
  top: calc(var(--topo-h) + 36px);
}

.perguntas {
  grid-column: 6 / 13;
  border-top: 1px solid var(--traco-forte);
}

.perguntas details {
  border-bottom: 1px solid var(--traco);
}

.perguntas summary {
  position: relative;
  padding: 24px 56px 24px 0;
  font-size: 1.16rem;
  font-weight: 500;
  font-stretch: 104%;
  line-height: 1.35;
  list-style: none;
  cursor: pointer;
}

.perguntas summary::-webkit-details-marker {
  display: none;
}

.perguntas summary::before,
.perguntas summary::after {
  content: "";
  position: absolute;
  right: 6px;
  top: 50%;
  width: 18px;
  height: 1.5px;
  background: var(--tinta);
  transition: transform 0.4s var(--ease);
}

.perguntas summary::after {
  transform: rotate(90deg);
}

.perguntas details[open] summary::after {
  transform: rotate(0deg);
}

.perguntas summary:hover {
  color: var(--latao-escuro);
}

.perguntas details p {
  max-width: 64ch;
  padding: 0 56px 26px 0;
  color: var(--texto-sec);
}

.perguntas details::details-content {
  block-size: 0;
  overflow: hidden;
  transition:
    block-size 0.45s var(--ease),
    content-visibility 0.45s allow-discrete;
}

.perguntas details[open]::details-content {
  block-size: auto;
}

/* ---------- Contato ---------- */
.contato__grade {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 56px 24px;
  align-items: start;
}

.contato__chamada {
  grid-column: 1 / 6;
  display: grid;
  gap: 22px;
}

.canais {
  display: grid;
  gap: 20px;
  margin-top: 14px;
  padding-top: 26px;
  border-top: 1px solid var(--traco);
}

.canais li {
  display: grid;
  gap: 4px;
}

.canais .rotulo {
  font-size: 0.74rem;
}

.canais a {
  justify-self: start;
  font-size: 1.12rem;
  text-decoration: none;
  background: linear-gradient(var(--latao), var(--latao)) left bottom / 0 1px no-repeat;
  transition: background-size 0.45s var(--ease);
}

.canais a:hover {
  background-size: 100% 1px;
}

.formulario {
  grid-column: 7 / 13;
  display: grid;
  gap: 24px;
  padding: clamp(24px, 3.2vw, 44px);
  border: 1px solid var(--traco);
  background: var(--grafite-2);
}

.campo {
  display: grid;
  gap: 8px;
}

.campo label,
.opcoes legend {
  font-family: var(--f-mono);
  font-size: 0.76rem;
  font-weight: 500;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--texto-sec);
}

.opcional {
  text-transform: none;
  letter-spacing: 0;
  opacity: 0.75;
}

.campo input,
.campo textarea {
  width: 100%;
  padding: 10px 0;
  border: 0;
  border-bottom: 1px solid var(--traco-forte);
  border-radius: 0;
  background: transparent;
  font-size: 1.06rem;
  color: var(--texto);
  transition: border-color 0.3s;
  resize: vertical;
}

.campo input::placeholder,
.campo textarea::placeholder {
  color: rgba(242, 239, 233, 0.34);
}

.campo input:focus,
.campo textarea:focus {
  outline: none;
  border-bottom-color: var(--latao);
  box-shadow: 0 1px 0 0 var(--latao);
}

.opcoes {
  min-width: 0;
  padding: 0;
  border: 0;
}

.opcoes legend {
  margin-bottom: 12px;
  padding: 0;
}

.opcoes__lista {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.opcoes label {
  position: relative;
}

.opcoes input {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.opcoes span {
  display: inline-flex;
  align-items: center;
  min-height: 42px;
  padding: 8px 15px;
  border: 1px solid var(--traco-forte);
  font-size: 0.92rem;
  transition:
    background-color 0.25s,
    color 0.25s,
    border-color 0.25s;
}

.opcoes label:hover span {
  border-color: var(--texto-sec);
}

.opcoes input:checked + span {
  background: var(--latao);
  border-color: var(--latao);
  color: var(--tinta);
}

.opcoes input:focus-visible + span {
  outline: 2px solid var(--latao-claro);
  outline-offset: 2px;
}

.formulario__erro {
  padding: 10px 14px;
  border-left: 2px solid #e2a48a;
  background: rgba(226, 164, 138, 0.1);
  font-size: 0.93rem;
  color: #f0c3b0;
}

.formulario__nota {
  font-size: 0.84rem;
  color: var(--texto-sec);
  text-align: center;
}

/* ---------- Rodapé (carimbo) ---------- */
.rodape {
  padding-block: 8px 30px;
}

.contato + .rodape,
main + .rodape {
  border-top: 1px solid var(--traco);
}

.rodape .wrap {
  padding-top: 52px;
}

.carimbo {
  display: grid;
  grid-template-columns: minmax(280px, 1fr) minmax(0, 2.1fr);
  border: 1px solid var(--traco-forte);
}

.carimbo__marca {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 26px 28px;
  border-right: 1px solid var(--traco-forte);
}

.carimbo__mono {
  width: 40px;
  height: 58px;
  flex: none;
  fill: none;
  stroke: var(--latao);
  stroke-width: 3;
}

.carimbo__nome {
  font-size: 0.86rem;
}

.carimbo__lema {
  margin-top: 8px;
  font-family: var(--f-mono);
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--latao-claro);
}

.carimbo__campos {
  display: grid;
  grid-template-columns: 1.15fr 1.45fr 0.55fr 0.55fr;
  grid-template-areas:
    "resp cont esc folha"
    "end end end data";
}

.carimbo__campos > div {
  display: grid;
  align-content: start;
  gap: 4px;
  padding: 14px 18px;
  border-left: 1px solid var(--traco);
}

.carimbo__campos > div:nth-child(-n + 4) {
  border-bottom: 1px solid var(--traco);
}

.carimbo__campos > div.c-resp,
.carimbo__campos > div.c-end {
  border-left: 0;
}

.c-resp {
  grid-area: resp;
}

.c-end {
  grid-area: end;
}

.c-cont {
  grid-area: cont;
}

.c-esc {
  grid-area: esc;
}

.c-folha {
  grid-area: folha;
}

.c-data {
  grid-area: data;
}

.carimbo dt {
  font-family: var(--f-mono);
  font-size: 0.66rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--texto-sec);
}

.carimbo dd {
  font-size: 0.93rem;
  line-height: 1.45;
}

.carimbo dd a {
  text-decoration: none;
}

.carimbo dd a:hover {
  color: var(--latao-claro);
}

.rodape__fim {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px 28px;
  margin-top: 26px;
  font-size: 0.88rem;
  color: var(--texto-sec);
}

.rodape__fim nav {
  display: flex;
  gap: 22px;
}

.rodape__fim nav a {
  text-decoration: none;
}

.rodape__fim nav a:hover {
  color: var(--texto);
}

.link-seta--sobe .seta {
  transform: rotate(-90deg);
  width: 18px;
}

.link-seta--sobe:hover .seta {
  transform: rotate(-90deg) translateX(4px);
}

/* ---------- Lupa (projeto ampliado) ----------
   A foto sai da miniatura e cresce até o centro (o JS faz o movimento); ao lado, a ficha
   do projeto com a descrição tirada da legenda do Instagram. No celular a ficha fica embaixo. */
.lupa {
  position: fixed;
  inset: 0;
  width: 100%;
  max-width: none;
  height: 100%;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  overflow: hidden;
  background: transparent;
  color: #f2efe9;
}

.lupa::backdrop {
  background: transparent;
}

.lupa[open] {
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(320px, 27vw, 400px);
  grid-template-rows: minmax(0, 1fr);
}

.lupa::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: #141311;
  animation: gp-aparece 0.35s var(--ease) both;
}

.lupa.fechando::before {
  animation: gp-some 0.3s var(--ease) both;
}

@keyframes gp-some {
  to {
    opacity: 0;
  }
}

.lupa__palco {
  position: relative;
  display: grid;
  place-items: center;
  min-width: 0;
  min-height: 0;
  padding: 64px 92px 56px;
  touch-action: pan-y pinch-zoom;
}

.lupa__palco img {
  display: block;
  max-width: none;
  background: #2a2926;
  user-select: none;
  -webkit-user-select: none;
  -webkit-user-drag: none;
  transform-origin: 0 0;
}

.lupa__info {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-height: 0;
  padding: 96px clamp(24px, 2.6vw, 40px) 36px;
  border-left: 1px solid rgba(242, 239, 233, 0.12);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.lupa__contador {
  font-family: var(--f-mono);
  font-size: 0.78rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.08em;
  color: #8f897e;
}

.lupa__tag {
  display: flex;
  align-items: center;
  gap: 0.9em;
  margin-top: 18px;
  font-family: var(--f-mono);
  font-size: 0.74rem;
  letter-spacing: 0.07em;
  line-height: 1.4;
  text-transform: uppercase;
  color: var(--latao-claro);
}

.lupa__tag::before {
  content: "";
  width: 22px;
  height: 1px;
  flex: none;
  background: currentColor;
}

.lupa__titulo {
  font-size: clamp(1.6rem, 1.05rem + 1vw, 2.25rem);
  font-weight: 300;
  font-stretch: 112%;
  letter-spacing: -0.026em;
  line-height: 1.06;
  text-wrap: balance;
}

.lupa__texto {
  font-size: 1rem;
  line-height: 1.62;
  color: #c9c3b8;
  text-wrap: pretty;
}

.lupa__texto:empty {
  display: none;
}

.lupa__acoes {
  display: grid;
  gap: 16px;
  margin-top: auto;
  padding-top: 26px;
}

.lupa__insta {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding-block: 4px;
  font-size: 0.92rem;
  color: #cfc9be;
  text-decoration: none;
  transition: color 0.25s;
}

.lupa__insta:hover {
  color: #fff;
}

.lupa__insta .icone {
  width: 18px;
  height: 18px;
  fill: currentColor;
}

.lupa__insta[hidden] {
  display: none;
}

/* a ficha entra logo depois da foto */
.lupa__info > * {
  transition:
    opacity 0.45s var(--ease),
    transform 0.55s var(--ease);
}

.lupa.entrando .lupa__info > * {
  opacity: 0;
  transform: translateY(10px);
  transition: none;
}

.lupa__info > :nth-child(2) {
  transition-delay: 0.04s;
}

.lupa__info > :nth-child(3) {
  transition-delay: 0.08s;
}

.lupa__info > :nth-child(4) {
  transition-delay: 0.12s;
}

.lupa__info > :nth-child(5) {
  transition-delay: 0.16s;
}

.lupa.fechando .lupa__info,
.lupa.fechando .lupa__botao {
  opacity: 0;
  transition: opacity 0.2s;
}

.lupa__botao {
  position: absolute;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 50px;
  height: 50px;
  padding: 0;
  border: 1px solid rgba(242, 239, 233, 0.24);
  background: rgba(19, 18, 16, 0.35);
  color: #f2efe9;
  cursor: pointer;
  transition:
    border-color 0.25s,
    background-color 0.25s,
    opacity 0.2s;
}

.lupa__botao:hover {
  border-color: var(--latao);
  background: rgba(19, 18, 16, 0.6);
}

.lupa__botao svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
}

.lupa__fechar {
  top: 16px;
  right: 16px;
}

.lupa__ant,
.lupa__prox {
  top: 50%;
  margin-top: -25px;
}

.lupa__ant {
  left: 22px;
}

.lupa__prox {
  right: 22px;
}

/* ---------- Orçamento rápido (gaveta) ----------
   Abre por cima da página, sem tirar a pessoa de onde ela estava lendo:
   à direita no computador, de baixo para cima no celular. */
.gaveta {
  position: fixed;
  inset: 0 0 0 auto;
  width: min(500px, 100%);
  max-width: none;
  height: 100%;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  border-left: 1px solid var(--traco-forte);
  overflow: hidden;
}

.gaveta[open] {
  animation: gaveta-entra 0.55s var(--ease) both;
}

.gaveta.fechando {
  animation: gaveta-sai 0.32s var(--ease-io) both;
}

.gaveta::backdrop {
  background: rgba(27, 26, 24, 0.55);
  animation: gp-aparece 0.4s var(--ease) both;
}

.gaveta.fechando::backdrop {
  animation: gp-some 0.32s var(--ease) both;
}

@keyframes gaveta-entra {
  from {
    transform: translateX(100%);
  }
}

@keyframes gaveta-sai {
  to {
    transform: translateX(100%);
  }
}

.gaveta__corpo {
  display: grid;
  align-content: start;
  gap: 16px;
  height: 100%;
  max-height: 100dvh;
  padding: 20px clamp(22px, 3vw, 38px) 30px;
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* os blocos de dentro chegam em cascata, logo atrás da folha */
.gaveta[open] .gaveta__corpo > * {
  animation: gp-surge 0.5s var(--ease) both;
}

.gaveta[open] .gaveta__corpo > :nth-child(2) {
  animation-delay: 0.1s;
}

.gaveta[open] .gaveta__corpo > :nth-child(3) {
  animation-delay: 0.14s;
}

.gaveta[open] .gaveta__corpo > :nth-child(4) {
  animation-delay: 0.18s;
}

.gaveta[open] .gaveta__corpo > :nth-child(5) {
  animation-delay: 0.22s;
}

.gaveta__cabeca {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 10px;
}

.gaveta__fechar {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--traco-forte);
  background: transparent;
  color: var(--texto);
  cursor: pointer;
  transition: border-color 0.25s;
}

.gaveta__fechar:hover {
  border-color: var(--latao);
}

.gaveta__fechar svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
}

.gaveta__titulo {
  font-size: clamp(2rem, 1.5rem + 1.4vw, 2.7rem);
  font-weight: 300;
  font-stretch: 112%;
  letter-spacing: -0.032em;
  line-height: 1;
}

.gaveta__intro {
  color: var(--texto-sec);
}

.formulario--gaveta {
  grid-column: auto;
  gap: 22px;
  margin-top: 8px;
  padding: 22px 0 0;
  border: 0;
  border-top: 1px solid var(--traco);
  background: none;
}

.formulario--gaveta .opcoes span {
  min-height: 40px;
  padding: 7px 13px;
  font-size: 0.9rem;
}

.gaveta__rodape {
  display: grid;
  gap: 10px;
  margin-top: 6px;
  padding-top: 18px;
  border-top: 1px solid var(--traco);
  font-size: 0.88rem;
  color: var(--texto-sec);
}

.gaveta__google strong {
  font-weight: 500;
  color: var(--texto);
}

.gaveta__direto {
  justify-self: start;
  color: var(--texto-sec);
  text-underline-offset: 3px;
  text-decoration-color: var(--traco-forte);
  transition: color 0.25s;
}

.gaveta__direto:hover {
  color: var(--texto);
}

/* ---------- Planta de situação (mapa no rodapé) ----------
   Mesma prancha do carimbo: a coluna da esquerda alinha com a marca e o desenho com os campos. */
.prancha {
  border: 1px solid var(--traco-forte);
}

.prancha .carimbo {
  border: 0;
  border-top: 1px solid var(--traco-forte);
}

.situacao {
  display: grid;
  grid-template-columns: minmax(280px, 1fr) minmax(0, 2.1fr);
}

.situacao__info {
  order: -1;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 26px 28px 22px;
}

.situacao__end {
  font-size: 1.22rem;
  font-weight: 300;
  font-stretch: 108%;
  letter-spacing: -0.01em;
  line-height: 1.32;
}

.situacao__perto {
  font-size: 0.93rem;
  color: var(--texto-sec);
}

.situacao__acoes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 24px;
  margin-top: 8px;
}

.situacao__credito {
  margin-top: auto;
  padding-top: 18px;
  font-size: 0.72rem;
  line-height: 1.5;
  color: var(--texto-sec);
}

.situacao__credito a {
  color: inherit;
  text-underline-offset: 2px;
}

.situacao__mapa {
  position: relative;
  min-height: clamp(320px, 33vw, 470px);
  overflow: hidden;
  border-left: 1px solid var(--traco-forte);
  background-color: var(--grafite);
  /* malha de desenho enquanto o mapa não chega (e por baixo dele) */
  background-image:
    linear-gradient(to right, rgba(242, 239, 233, 0.045) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(242, 239, 233, 0.045) 1px, transparent 1px);
  background-size: 48px 48px;
  background-position: center;
}

.situacao__mapa > svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  animation: gp-aparece 0.9s var(--ease) both;
  transition: opacity 0.4s;
}

.situacao__abrir {
  position: absolute;
  inset: 0;
  z-index: 3;
}

.situacao__abrir:focus-visible {
  outline: 1px solid var(--latao);
  outline-offset: -6px;
}

.situacao__marco {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 2;
  pointer-events: none;
}

.situacao__ponto {
  position: absolute;
  left: -7px;
  top: -7px;
  width: 14px;
  height: 14px;
  border: 2px solid var(--grafite);
  border-radius: 50%;
  background: var(--latao);
  box-shadow: 0 0 0 1px var(--latao-claro);
}

.situacao__ponto::after {
  content: "";
  position: absolute;
  inset: -2px;
  border: 1px solid var(--latao-claro);
  border-radius: 50%;
  animation: pulso 2.6s var(--ease) infinite;
}

@keyframes pulso {
  from {
    transform: scale(1);
    opacity: 0.9;
  }
  to {
    transform: scale(4.2);
    opacity: 0;
  }
}

/* a etiqueta é uma chamada de desenho: uma linha a 45° e o texto no fim dela */
.situacao__etiqueta {
  position: absolute;
  left: 30px;
  bottom: 30px;
  display: grid;
  gap: 3px;
  padding: 9px 13px 10px;
  border: 1px solid rgba(199, 184, 170, 0.55);
  background: rgba(27, 26, 24, 0.92);
  font-family: var(--f-mono);
  font-size: 0.66rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--texto-sec);
}

.situacao__etiqueta strong {
  font-family: var(--f-sans);
  font-size: 0.92rem;
  font-weight: 500;
  font-stretch: 104%;
  letter-spacing: 0.01em;
  text-transform: none;
  color: var(--texto);
}

.situacao__etiqueta::before {
  content: "";
  position: absolute;
  left: -30px;
  bottom: -30px;
  width: 42.4px;
  height: 1px;
  background: rgba(199, 184, 170, 0.7);
  transform: rotate(-45deg);
  transform-origin: 0 0;
}

.situacao__norte {
  position: absolute;
  top: 16px;
  right: 18px;
  z-index: 2;
  display: grid;
  justify-items: center;
  gap: 3px;
  font-family: var(--f-mono);
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  color: var(--texto-sec);
  pointer-events: none;
}

.situacao__norte svg {
  width: 12px;
  height: 18px;
  fill: var(--latao-claro);
}

.situacao__escala {
  position: absolute;
  left: 18px;
  bottom: 16px;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 9px;
  font-family: var(--f-mono);
  font-size: 0.66rem;
  letter-spacing: 0.06em;
  color: var(--texto-sec);
  pointer-events: none;
}

.situacao__escala i {
  display: block;
  width: var(--mapa-escala, 125px);
  height: 5px;
  border: 1px solid currentColor;
  background: linear-gradient(90deg, currentColor 50%, transparent 50%);
}

/* ---------- Detalhes ---------- */
/* fotos que ainda estão chegando aparecem suavemente, em vez de "pintar" de cima para baixo */
img {
  transition: opacity 0.6s var(--ease);
}

img[data-carregando] {
  opacity: 0;
}

.galeria__abrir img {
  transition:
    transform 1s var(--ease),
    opacity 0.6s var(--ease);
}

/* troca de filtro na galeria: as fotos deslizam para o novo lugar (View Transitions) */
::view-transition-old(root),
::view-transition-new(root) {
  animation: none;
}

::view-transition-group(*) {
  animation-duration: 0.5s;
  animation-timing-function: cubic-bezier(0.2, 0.7, 0.1, 1);
}

::view-transition-new(*):only-child {
  animation: gp-surge 0.45s cubic-bezier(0.2, 0.7, 0.1, 1) 0.1s both;
}

::view-transition-old(*):only-child {
  animation: gp-some 0.18s ease both;
}

/* ---------- Responsivo ---------- */
@media (max-width: 1100px) {
  .menu {
    gap: 20px;
  }

  .menu a {
    font-size: 0.9rem;
  }

  .galeria {
    --galeria-h: 200px;
  }

  .etapas {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    row-gap: 44px;
  }

  .etapa:nth-child(3) .cota {
    margin-right: 0;
  }

  .pilares {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .carrossel {
    --por-vez: 2;
  }
}

@media (max-width: 980px) {
  :root {
    --topo-h: 64px;
  }

  .menu {
    display: none;
  }

  .menu-botao {
    display: inline-flex;
  }

  .topo__inner {
    gap: 8px;
  }

  .botao--topo {
    width: 44px;
    min-height: 44px;
    padding: 0;
  }

  .botao--topo span {
    display: none;
  }

  .hero__grade {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "rot"
      "tit"
      "txt"
      "maq"
      "pro";
    grid-template-rows: none;
    row-gap: 26px;
  }

  .hero__texto,
  .provas {
    max-width: none;
  }

  .maquete {
    height: clamp(270px, 72vw, 520px);
  }

  .ad__texto,
  .ad__quadro,
  .sobre__painel,
  .sobre__texto,
  .contato__chamada,
  .formulario,
  .faq .secao__cabeca,
  .perguntas {
    grid-column: 1 / -1;
  }

  .faq .secao__cabeca {
    position: static;
  }

  .sobre__painel {
    aspect-ratio: 16 / 11;
  }

  .sobre__desenho {
    top: 10%;
    width: 28%;
  }

  .carimbo {
    grid-template-columns: minmax(0, 1fr);
  }

  .carimbo__marca {
    border-right: 0;
    border-bottom: 1px solid var(--traco-forte);
  }

  .situacao {
    grid-template-columns: minmax(0, 1fr);
  }

  .situacao__info {
    order: 0;
  }

  .situacao__mapa {
    min-height: clamp(280px, 62vw, 420px);
    border-left: 0;
    border-bottom: 1px solid var(--traco-forte);
  }

  .lupa[open] {
    grid-template-columns: minmax(0, 1fr) 320px;
  }

  .lupa__palco {
    padding-inline: 76px;
  }
}

@media (max-width: 760px) {
  body {
    font-size: 1rem;
  }

  .marca__nome {
    font-size: 0.72rem;
    letter-spacing: 0.22em;
  }

  .hero__titulo {
    font-size: clamp(3.1rem, 15.5vw, 5rem);
  }

  .provas li {
    padding-right: 10px;
    font-size: 0.8rem;
  }

  .provas li + li {
    padding-left: 12px;
  }

  .provas strong {
    font-size: 1rem;
  }

  .acoes .botao {
    width: 100%;
  }

  .sequencia {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 72%;
    margin-inline: calc(-1 * var(--margem));
    padding-inline: calc(var(--margem) - 9px);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }

  .sequencia::-webkit-scrollbar {
    display: none;
  }

  .sequencia__item {
    scroll-snap-align: start;
    scroll-margin-left: calc(var(--margem) - 9px);
  }

  .clientes__grade {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  .letreiro {
    width: 100%;
  }

  .secao__cabeca--lado {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
  }

  .filtros {
    flex-wrap: nowrap;
    justify-content: flex-start;
    max-width: none;
    margin-inline: calc(-1 * var(--margem));
    padding-inline: var(--margem);
    overflow-x: auto;
    scrollbar-width: none;
  }

  .filtros::-webkit-scrollbar {
    display: none;
  }

  .filtros button {
    flex: none;
  }

  .indice__item {
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 10px 14px;
    padding: 26px 0 24px;
  }

  .indice__num {
    padding-top: 0.45em;
  }

  .indice__cta {
    grid-column: 2;
    justify-self: start;
    padding: 6px 0 0;
    border-left: 0;
  }

  /* no celular: grade de 2 colunas com miniaturas quadradas (a lupa mostra a foto inteira) */
  .galeria {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px 12px;
  }

  .galeria::after {
    display: none;
  }

  .galeria__abrir img {
    aspect-ratio: 1;
    height: auto;
    object-fit: cover;
  }

  .galeria__mais {
    margin-top: 30px;
  }

  .galeria__legenda {
    flex-direction: column;
    gap: 3px;
    font-size: 0.86rem;
  }

  .galeria__legenda span:last-child {
    text-align: left;
    font-size: 0.66rem;
  }

  .etapas {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 0;
    border-left: 1px solid var(--cota-cor);
    margin-left: 6px;
  }

  .etapa {
    position: relative;
    padding: 0 0 34px 26px;
  }

  .etapa::before {
    content: "";
    position: absolute;
    left: -6px;
    top: 4px;
    width: 11px;
    height: 1px;
    background: var(--cota-cor);
    transform: rotate(45deg);
  }

  .etapa .cota {
    height: auto;
    margin: 0;
    clip-path: none;
    color: inherit;
  }

  .etapa .cota::before,
  .etapa .cota::after,
  .etapa .cota__linha {
    display: none;
  }

  .etapa .cota__texto {
    position: static;
    transform: none;
  }

  .pilares {
    grid-template-columns: minmax(0, 1fr);
  }

  /* no celular o próximo cartão aparece pela metade na borda: dá para ver que tem mais */
  .carrossel {
    --por-vez: 1.14;
    --vao: 12px;
  }

  .depos {
    margin-inline: calc(-1 * var(--margem));
    padding-inline: var(--margem);
    scroll-padding-inline: var(--margem);
  }

  .depo {
    padding: 24px 22px 26px;
  }

  .carrossel__controles {
    margin-top: 20px;
  }

  .carrossel__botao {
    width: 46px;
    height: 46px;
  }

  .ad__alternar {
    display: flex;
    width: 100%;
  }

  .ad__alternar button {
    flex: 1 1 0;
    min-width: 0;
    padding: 6px 8px;
  }

  .ad__etiqueta {
    top: 10px;
    left: 10px;
  }

  .ad__quadro {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 14px;
  }

  .carimbo__campos {
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "resp resp"
      "cont cont"
      "end end"
      "esc folha";
  }

  .carimbo__campos > div {
    border-left: 0;
    border-bottom: 1px solid var(--traco);
  }

  .carimbo__campos > div.c-folha {
    border-left: 1px solid var(--traco);
  }

  .carimbo__campos > div.c-data {
    display: none;
  }

  .carimbo__campos > div.c-esc,
  .carimbo__campos > div.c-folha {
    border-bottom: 0;
  }

  /* lupa no celular: foto em cima, ficha embaixo; dá para passar arrastando a foto */
  .lupa[open] {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr) auto;
  }

  .lupa__palco {
    padding: 68px 10px 14px;
  }

  .lupa__info {
    position: static;
    gap: 8px;
    max-height: 48dvh;
    padding: 18px 20px calc(18px + env(safe-area-inset-bottom));
    border-left: 0;
    border-top: 1px solid rgba(242, 239, 233, 0.12);
  }

  .lupa__contador {
    position: absolute;
    top: 30px;
    left: 20px;
  }

  .lupa__tag {
    margin-top: 0;
    font-size: 0.68rem;
  }

  .lupa__titulo {
    font-size: 1.4rem;
  }

  .lupa__texto {
    font-size: 0.93rem;
    line-height: 1.5;
  }

  .lupa__acoes {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    margin-top: 4px;
    padding-top: 8px;
  }

  .lupa__acoes .botao {
    min-height: 48px;
  }

  .lupa__insta {
    justify-content: center;
    width: 48px;
    height: 48px;
    border: 1px solid rgba(242, 239, 233, 0.24);
  }

  .lupa__insta span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }

  .lupa__fechar {
    top: 14px;
    right: 12px;
    width: 46px;
    height: 46px;
  }

  .lupa__ant,
  .lupa__prox {
    top: auto;
    bottom: 22px;
    width: 42px;
    height: 42px;
    margin-top: 0;
  }

  .lupa__palco .lupa__ant {
    left: 16px;
  }

  .lupa__palco .lupa__prox {
    right: 16px;
  }

  /* orçamento rápido no celular: sobe de baixo, como uma folha */
  .gaveta {
    inset: auto 0 0 0;
    width: 100%;
    height: auto;
    max-height: 92dvh;
    border-left: 0;
    border-top: 1px solid var(--traco-forte);
  }

  .gaveta[open] {
    animation-name: gaveta-sobe;
  }

  .gaveta.fechando {
    animation-name: gaveta-desce;
  }

  .gaveta__corpo {
    max-height: 92dvh;
    padding: 14px 20px calc(24px + env(safe-area-inset-bottom));
  }

  .gaveta__titulo {
    font-size: 2rem;
  }

  .situacao__info {
    padding: 22px 20px 20px;
  }

  .situacao__acoes .botao {
    width: 100%;
  }

  .situacao__etiqueta {
    left: 22px;
    bottom: 22px;
  }

  .situacao__etiqueta::before {
    left: -22px;
    bottom: -22px;
    width: 31.1px;
  }
}

@keyframes gaveta-sobe {
  from {
    transform: translateY(100%);
  }
}

@keyframes gaveta-desce {
  to {
    transform: translateY(100%);
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0s !important;
  }

  .letreiro__trilho {
    animation: none;
    flex-wrap: wrap;
    width: auto;
    row-gap: 6px;
  }

  .situacao__ponto::after {
    animation: none;
    display: none;
  }

  .js .cota {
    clip-path: none;
  }

  .js .sequencia .f,
  .js .sequencia .l {
    stroke-dashoffset: 0;
    fill-opacity: 1;
  }

  .js .sequencia .x {
    opacity: 1;
  }

  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) {
    animation: none !important;
  }
}