/* Hallmark · macrostructure: Split Studio · theme: custom · genre: playful
 * Tokens em css/tokens.css. Nenhuma cor ou fonte literal abaixo desta linha.
 */

/* ==========================================================================
   Base
   ========================================================================== */

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

html, body {
  /* clip, não hidden — hidden cria contexto de rolagem e quebra position:sticky */
  overflow-x: clip;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 6.5rem;   /* altura da nav com o logo maior */
  -webkit-text-size-adjust: 100%;
}

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

body {
  margin: 0;
  background: var(--color-paper);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

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

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 800;
  line-height: 1.06;
  letter-spacing: -0.03em;
  margin: 0;
  /* Gate 63 — display nunca estoura o container numa palavra longa */
  overflow-wrap: anywhere;
  min-width: 0;
  text-wrap: balance;
}

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

a { color: inherit; }

::selection {
  background: var(--color-accent);
  color: var(--color-accent-ink);
}

.skip {
  position: absolute;
  left: var(--space-sm);
  top: -4rem;
  z-index: var(--z-overlay);
  background: var(--color-ink);
  color: var(--color-paper);
  padding: var(--space-2xs) var(--space-sm);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  text-decoration: none;
}
.skip:focus { top: var(--space-sm); }

/* Foco — aparece instantaneamente, nunca com transição */
:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

/* ==========================================================================
   Layout
   ========================================================================== */

.section {
  padding-inline: var(--gutter);
  padding-block: var(--space-3xl);
  max-width: var(--container);
  margin-inline: auto;
}

/* Ritmo variado — nem toda seção respira igual */
.section--tight { padding-block: var(--space-2xl) var(--space-xl); }

/* Fundo sangrando até as bordas SEM mexer na largura da seção — assim o
   título alinha exatamente com o das seções sem fundo. A alternativa
   (max-width: none + margin auto nos filhos) centralizava os títulos. */
.section--tint {
  background: var(--color-paper-2);
  box-shadow: 0 0 0 100vmax var(--color-paper-2);
  clip-path: inset(0 -100vmax);
}

/* Cabeça de seção · S2 Hanging — pilha vertical, coluna única.
   Nunca rótulo-à-esquerda + título-à-direita. */
.section__head {
  max-width: 44ch;
  margin-bottom: var(--space-2xl);
}

.section__title {
  font-size: var(--text-2xl);
}

.section__lede {
  margin-top: var(--space-sm);
  color: var(--color-ink-2);
  max-width: var(--measure);
}

.prose {
  color: var(--color-ink-2);
  max-width: var(--measure);
}
.prose + .prose { margin-top: var(--space-sm); }
.prose--tight { font-size: var(--text-base); }

/* ==========================================================================
   Nav · N7 Brutal slab
   ========================================================================== */

.nav {
  position: sticky;
  top: 0;
  z-index: var(--z-nav);
  background: var(--color-paper);
  border-bottom: var(--rule-slab) solid var(--color-ink);
}

.nav__inner {
  max-width: var(--container);
  margin-inline: auto;
  padding: var(--space-xs) var(--gutter);
  display: flex;
  align-items: center;
  gap: var(--space-md);
}

.nav__brand { flex: none; line-height: 0; }
.nav__brand img { height: 3.5rem; width: auto; }

.nav__menu {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: var(--space-lg);
}

.nav__list {
  display: flex;
  align-items: center;
  gap: var(--space-md);
}

.nav__list a {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--color-ink-2);
  /* Gate 59 — texto clicável nunca quebra em duas linhas */
  white-space: nowrap;
  padding-block: var(--space-2xs);
  border-bottom: var(--rule-slab) solid transparent;
  transition: color var(--dur-micro) var(--ease-out),
              border-color var(--dur-micro) var(--ease-out);
}
.nav__list a:hover,
.nav__list a[aria-current="true"] {
  color: var(--color-ink);
  border-bottom-color: var(--color-accent);
}

.nav__toggle {
  display: none;
  margin-left: auto;
  align-items: center;
  gap: var(--space-2xs);
  min-height: 44px;
  padding-inline: var(--space-xs);
  background: none;
  border: var(--rule-slab) solid var(--color-ink);
  border-radius: var(--radius-pill);
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-ink);
  cursor: pointer;
}

.nav__toggle-bars,
.nav__toggle-bars::before,
.nav__toggle-bars::after {
  display: block;
  width: 16px;
  height: 2px;
  background: var(--color-ink);
  content: "";
}
.nav__toggle-bars { position: relative; }
.nav__toggle-bars::before { position: absolute; top: -5px; }
.nav__toggle-bars::after  { position: absolute; top: 5px; }

/* ==========================================================================
   Botões
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2xs);
  min-height: 44px;
  padding: var(--space-2xs) var(--space-md);
  border: var(--rule-slab) solid transparent;
  border-radius: var(--radius-pill);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;      /* Gate 59 */
  cursor: pointer;
  transition: background-color var(--dur-micro) var(--ease-out),
              border-color var(--dur-micro) var(--ease-out),
              transform var(--dur-micro) var(--ease-out);
}

.btn--lg {
  min-height: 52px;
  padding-inline: var(--space-lg);
  font-size: var(--text-base);
}

/* Texto ESCURO sobre o laranja: branco daria ~2,5:1 e reprovaria */
.btn--accent {
  background: var(--color-accent);
  color: var(--color-accent-ink);
  border-color: var(--color-accent);
}
.btn--accent:hover {
  background: var(--color-accent-hover);
  border-color: var(--color-accent-hover);
  transform: translateY(-1px);
}
.btn--accent:active { transform: translateY(0); }

.btn--ghost {
  background: transparent;
  color: var(--color-ink);
  border-color: var(--color-ink);
}
.btn--ghost:hover { background: var(--color-paper-3); transform: translateY(-1px); }
.btn--ghost:active { transform: translateY(0); }

/* Botão da lista de espera — amarelo do CDU Studios.
   A regra do tokens.css é sobre texto CLARO em cima do pastel (~2:1).
   Aqui é o contrário: tinta escura (L21) sobre o amarelo (L86) dá ~11:1.
   A borda em studios-deep segura a forma sobre fundo claro. */
.btn--studios {
  /* O rótulo é longo de propósito — deixa quebrar em vez de estourar */
  white-space: normal;
  text-align: center;
  background: var(--color-studios);
  color: var(--color-ink);
  border-color: var(--color-studios-deep);
}
.btn--studios:hover {
  background: var(--color-studios-deep);
  border-color: var(--color-studios-deep);
  color: var(--color-accent-ink);
  transform: translateY(-1px);
}
.btn--studios:active { transform: translateY(0); }

.btn[aria-disabled="true"] { opacity: 0.5; pointer-events: none; }

.btn__wa { flex: none; }

.link-arrow {
  display: inline-block;
  margin-top: var(--space-md);
  font-weight: 600;
  font-size: var(--text-sm);
  color: var(--color-ink);
  text-decoration: none;
  border-bottom: var(--rule-slab) solid var(--color-accent);
  padding-bottom: 2px;
  white-space: nowrap;
  transition: color var(--dur-micro) var(--ease-out);
}
.link-arrow::after { content: " →"; }
.link-arrow:hover { color: var(--color-muted); }

/* ==========================================================================
   Hero · H2 Split diptych, 7/5
   ========================================================================== */

.hero {
  /* Menos respiro embaixo: a seção seguinte já traz o seu próprio */
  padding-block: var(--space-2xl) var(--space-xl);
}

/* Mesmo modelo de caixa que .section — container centralizado COM o padding
   dentro. Com o padding no pai, o hero começava 25px à esquerda das demais. */
.hero__inner {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: grid;
  /* minmax(0, …) — Gate 61: trilha com imagem nunca usa 1fr puro */
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: var(--space-2xl);
  align-items: center;
}

.hero__title {
  font-size: var(--text-display);
  max-width: 17ch;   /* cabe "Um novo jeito de viver." sem deixar órfão */
}

/* Segundo verso no roxo da marca, como na apresentação do CDU.
   Cor sólida, nunca gradiente — gradiente em título é o tell mais rápido
   de página gerada. */
.hero__title-mark { color: var(--color-accent); }

.hero__lede {
  margin-top: var(--space-md);
  font-size: var(--text-md);
  color: var(--color-ink-2);
  max-width: 46ch;
}

.hero__actions {
  margin-top: var(--space-lg);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
}

.hero__meta {
  margin-top: var(--space-sm);
  font-size: var(--text-sm);
  color: var(--color-muted);
}

.hero__figure { margin: 0; }
.hero__figure img {
  width: 100%;
  border-radius: var(--radius-lg);
  border: var(--rule-hair) solid var(--color-rule);
  /* Os renders são 2,18:1. Recorte suave e enquadramento à direita,
     onde ficam o prédio e o letreiro. */
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: 68% center;
}

/* ==========================================================================
   Split Studio — diptych alternado
   ========================================================================== */

.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-2xl);
  align-items: center;
}
.split + .split { margin-top: var(--space-3xl); }

.split--reverse .split__text  { order: 2; }
.split--reverse .split__figure { order: 1; }

.split__title {
  font-size: var(--text-xl);
  margin-bottom: var(--space-sm);
}

.split__figure { margin: 0; }
.split__figure img {
  width: 100%;
  border-radius: var(--radius-lg);
  border: var(--rule-hair) solid var(--color-rule);
  aspect-ratio: 16 / 10;
  object-fit: cover;
}

/* ==========================================================================
   Unidades — duas colunas. Cada uma carrega sua cor da marca.
   ========================================================================== */

.units {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-lg);
}

.unit {
  display: flex;
  flex-direction: column;
  padding: var(--space-lg);
  background: var(--color-paper);
  border: var(--rule-hair) solid var(--color-rule);
  border-top: 4px solid var(--unit-color, var(--color-rule));
  border-radius: var(--radius-md);
  transition: transform var(--dur-short) var(--ease-out),
              box-shadow var(--dur-short) var(--ease-out);
}
.unit:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 28px -18px var(--color-deep);
}

.unit--rooms   { --unit-color: var(--color-rooms);   --unit-ink: var(--color-rooms-deep); }
.unit--studios { --unit-color: var(--color-studios); --unit-ink: var(--color-studios-deep); }

.unit__name { font-size: var(--text-xl); }

.unit__what {
  margin-top: var(--space-2xs);
  color: var(--color-ink-2);
}

.unit__list {
  margin-top: var(--space-md);
  display: grid;
  gap: var(--space-2xs);
}
.unit__list li {
  position: relative;
  padding-left: var(--space-md);
  font-size: var(--text-sm);
  color: var(--color-ink-2);
}
.unit__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 0.5rem;
  height: 2px;
  background: var(--unit-color);
}

.unit__cta { margin-top: var(--space-md); align-self: start; }

.unit__figure {
  margin: var(--space-md) 0 0;
  order: 99;   /* a foto sempre fecha o card, abaixo do CTA */
}
.unit__figure img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border-radius: var(--radius-sm);
}

.unit__missing {
  margin-top: auto;
  padding-top: var(--space-md);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-muted);
}

/* ==========================================================================
   Estrutura e benefícios — lista tipográfica em duas colunas.
   Sem ícones: misturar biblioteca de ícone com o traço do logo é o tipo de
   ruído que faz uma página parecer montada, não desenhada. O marcador é o
   próprio arco da marca, em miniatura.
   ========================================================================== */

/* Um quadro por unidade. Cada um herda --kit-color e tinge o marcador,
   o ponto do título e a nota — é o que faz o leitor saber de qual unidade
   está lendo sem voltar ao cabeçalho. */
.kit--rooms   { --kit-color: var(--color-rooms-deep); --kit-dot: var(--color-rooms); }
.kit--studios { --kit-color: var(--color-studios-deep); --kit-dot: var(--color-studios); }

.kit + .kit { margin-top: var(--space-2xl); }

.kit__title {
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
  font-size: var(--text-lg);
  margin-bottom: var(--space-sm);
  color: var(--kit-color);
}
.kit__dot {
  flex: none;
  width: 0.75rem;
  height: 0.75rem;
  border-radius: var(--radius-pill);
  background: var(--kit-dot);
}

.amenities {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 var(--space-2xl);
  border-top: var(--rule-slab) solid var(--color-ink);
}

.amenities__item {
  position: relative;
  padding: var(--space-sm) 0 var(--space-sm) var(--space-lg);
  border-bottom: var(--rule-hair) solid var(--color-rule);
  color: var(--color-ink);
}

/* Arco da marca em miniatura, na cor da unidade */
.amenities__item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1.35em;
  width: 0.875rem;
  height: 0.4375rem;
  border: 2.5px solid var(--kit-color, var(--color-accent));
  border-top: 0;
  border-radius: 0 0 var(--radius-pill) var(--radius-pill);
}

/* As duas primeiras linhas são as que mais pesam na decisão */
.amenities__item:nth-child(-n+2) {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-md);
  letter-spacing: -0.015em;
  line-height: 1.3;
}

.note-ref {
  font-size: 0.7em;
  font-weight: 700;
  color: var(--kit-color, var(--color-accent));
  padding-left: 1px;
}

.notes {
  margin-top: var(--space-lg);
  display: grid;
  gap: var(--space-2xs);
  max-width: var(--measure);
  counter-reset: none;
}
.notes li {
  display: flex;
  gap: var(--space-2xs);
  font-size: var(--text-sm);
  color: var(--color-muted);
}
.notes__ref {
  flex: none;
  font-weight: 700;
  color: var(--kit-color, var(--color-accent));
}

/* ==========================================================================
   Motivos gráficos — o arco do logo, ampliado.
   Quatro no site inteiro, sempre chapados e ancorados numa borda. Não são
   enfeite ambiente: é a mesma forma da marca em outra escala.
   ========================================================================== */

.motif {
  position: absolute;
  pointer-events: none;
  z-index: 0;
}

.hero, .section, .visit { position: relative; }
.hero > .hero__inner,
.section > *:not(.motif),
.visit > .visit__inner { position: relative; z-index: var(--z-base); }

/* Hero — arco roxo grande, ancorado embaixo à direita para o arco aparecer
   inteiro em vez de virar mancha atrás da foto */
.motif--arc-hero {
  bottom: 2rem;
  right: -4rem;
  width: 24rem;
  height: 12rem;
  border: 3rem solid var(--color-accent);
  border-top: 0;
  border-radius: 0 0 999px 999px;
  opacity: 0.14;
}

/* Hero — quarto de círculo ciano na base esquerda */
.motif--dot-hero {
  bottom: -3rem;
  left: -5rem;
  width: 12rem;
  height: 12rem;
  border-radius: 50%;
  background: var(--color-rooms);
  opacity: 0.5;
}

/* Espaços — quarto de círculo amarelo no canto superior direito */
.motif--quarter {
  top: 0;
  right: 0;
  width: 14rem;
  height: 14rem;
  border-radius: 0 0 0 999px;
  background: var(--color-studios);
  opacity: 0.32;
}

/* Estrutura — arco sangrando pelo canto superior esquerdo, sem encostar
   no título */
.motif--arc-small {
  top: 1rem;
  left: -3rem;
  width: 9rem;
  height: 4.5rem;
  border: 1.5rem solid var(--color-rooms);
  border-top: 0;
  border-radius: 0 0 999px 999px;
  opacity: 0.4;
}

/* Faixa de visita — arco vazado grande à direita */
.motif--arc-visit {
  top: -4rem;
  right: 4%;
  width: 22rem;
  height: 11rem;
  border: 2.5rem solid var(--color-on-deep);
  border-top: 0;
  border-radius: 0 0 999px 999px;
  opacity: 0.09;
}

/* As seções que hospedam motivo precisam recortar o excedente */
.hero, .visit, .section--tint, #estrutura { overflow: clip; }

/* ==========================================================================
   Tríade da marca — Compartilhe · Descanse · Usufrua
   ========================================================================== */

.triad {
  margin-top: var(--space-lg);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-sm);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.triad__item--1 { color: var(--color-rooms-deep); }
.triad__item--2 { color: var(--color-studios-deep); }
.triad__item--3 { color: var(--color-accent); }

/* ==========================================================================
   Comparação · F3 Tabular spec sheet, 3 colunas
   ========================================================================== */

.table-wrap { overflow-x: auto; }

.cmp {
  width: 100%;
  min-width: 34rem;
  border-collapse: collapse;
  text-align: left;
  font-variant-numeric: tabular-nums;
}

.cmp th, .cmp td {
  padding: var(--space-sm) var(--space-md) var(--space-sm) 0;
  border-bottom: var(--rule-hair) solid var(--color-rule);
  vertical-align: top;
}

.cmp thead th { border-bottom: var(--rule-slab) solid var(--color-ink); }

.cmp tbody th {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--text-sm);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-muted);
  width: 28%;
}

.cmp td { color: var(--color-ink); }

.cmp__tag {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--text-md);
  letter-spacing: -0.02em;
  white-space: nowrap;
}
.cmp__tag::before {
  content: "";
  width: 0.625rem;
  height: 0.625rem;
  border-radius: var(--radius-pill);
  flex: none;
}
.cmp__tag--rooms::before   { background: var(--color-rooms); }
.cmp__tag--studios::before { background: var(--color-studios); }

/* No desktop o cabeçalho já nomeia a coluna — o rótulo repetido fica oculto,
   mas continua no DOM para o leitor de tela quando a tabela empilha. */
.cmp__for {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ==========================================================================
   Pendências e legendas
   ========================================================================== */

/* Marcador de dado pendente — some quando você preencher */
.todo {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-muted);
}
.todo--block { display: block; margin-top: var(--space-3xs); }
.todo::before {
  content: "";
  display: inline-block;
  width: 0.5rem;
  height: 0.5rem;
  margin-right: var(--space-3xs);
  border-radius: var(--radius-pill);
  background: var(--color-studios);
  vertical-align: 0;
}

.figcap {
  margin-top: var(--space-2xs);
  font-size: var(--text-xs);
  letter-spacing: 0.04em;
  color: var(--color-muted);
}

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ==========================================================================
   Steps · F4 Step sequence
   ========================================================================== */

.steps {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-xl) var(--space-2xl);
  counter-reset: step;
}

.steps__item {
  padding-top: var(--space-md);
  border-top: var(--rule-slab) solid var(--color-ink);
}

.steps__num {
  display: block;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--text-lg);
  font-variant-numeric: tabular-nums;
  color: var(--color-accent);
  letter-spacing: -0.02em;
}

.steps__title {
  font-size: var(--text-md);
  margin-block: var(--space-2xs) var(--space-2xs);
}

/* ==========================================================================
   Visita · faixa roxa da marca
   ========================================================================== */

.visit {
  background: var(--color-deep);
  color: var(--color-on-deep);
  padding-block: var(--space-3xl);
}

/* Alinhado à esquerda como o resto da página — um bloco centralizado aqui
   quebraria o eixo que todas as outras seções seguem. */
.visit__inner {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.visit__title {
  font-size: var(--text-display-s);
  max-width: 18ch;
}

.visit__lede {
  margin-top: var(--space-md);
  color: var(--color-on-deep-2);
  font-size: var(--text-md);
  max-width: 52ch;
}

.visit .btn { margin-top: var(--space-lg); }

/* Sobre a faixa roxa o botão inverte — roxo sobre roxo não separa. */
.visit .btn--accent {
  background: var(--color-on-deep);
  color: var(--color-deep);
  border-color: var(--color-on-deep);
}
.visit .btn--accent:hover {
  background: var(--color-paper);
  border-color: var(--color-paper);
}
.visit :focus-visible { outline-color: var(--color-on-deep); }

/* ==========================================================================
   Contato
   ========================================================================== */

.contact {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-lg);
  border-top: var(--rule-hair) solid var(--color-rule);
  padding-top: var(--space-lg);
}

.contact__label {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-muted);
  margin-bottom: var(--space-2xs);
}

.contact__value { color: var(--color-ink); }
.contact__value a {
  color: var(--color-ink);
  text-decoration-color: var(--color-accent);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}
.contact__value a:hover { color: var(--color-muted); }

/* ==========================================================================
   Footer · Ft5 Statement
   ========================================================================== */

.foot {
  background: var(--color-deep-2);
  color: var(--color-on-deep);
  padding-block: var(--space-2xl) var(--space-xl);
}

.foot__inner {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.foot__statement {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-xl);
  line-height: 1.15;
  letter-spacing: -0.025em;
  max-width: 24ch;
  text-wrap: balance;
}

.foot__meta {
  margin-top: var(--space-2xl);
  padding-top: var(--space-md);
  border-top: var(--rule-hair) solid var(--color-rule-deep);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-md);
}

.foot__mark { height: 3rem; width: auto; }

.foot__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
  margin-right: auto;
}
.foot__links a {
  font-size: var(--text-sm);
  color: var(--color-on-deep-2);
  text-decoration: none;
  white-space: nowrap;
  border-bottom: var(--rule-hair) solid transparent;
  transition: color var(--dur-micro) var(--ease-out),
              border-color var(--dur-micro) var(--ease-out);
}
.foot__links a:hover {
  color: var(--color-on-deep);
  border-bottom-color: var(--color-accent);
}

.foot__copy {
  font-size: var(--text-sm);
  color: var(--color-on-deep-2);
}

.foot__legal {
  margin-top: var(--space-md);
  max-width: 68ch;
  font-size: var(--text-xs);
  line-height: 1.5;
  color: var(--color-on-deep-2);
  opacity: 0.75;
}

/* ==========================================================================
   C4 · Barra fixa de WhatsApp (só celular)
   ========================================================================== */

.wabar {
  display: none;
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: var(--z-sticky);
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  padding: var(--space-2xs) var(--space-sm);
  padding-bottom: max(var(--space-2xs), env(safe-area-inset-bottom));
  background: var(--color-paper);
  border-top: var(--rule-slab) solid var(--color-ink);
  transform: translateY(100%);
  transition: transform var(--dur-short) var(--ease-out);
}
.wabar.is-visible { transform: translateY(0); }
.wabar__text { font-size: var(--text-sm); font-weight: 600; }
.wabar__btn { flex: none; }

/* ==========================================================================
   Onde fica · mapa + endereços
   ========================================================================== */

.mapa {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: var(--space-xl);
  align-items: start;
}

.mapa__figure { margin: 0; }

.mapa__img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-md);
  border: var(--rule-hair) solid var(--color-rule);
}

/* Coluna dos endereços */
.mapa__lado {
  display: grid;
  gap: var(--space-md);
}

.geo {
  padding: var(--space-md);
  background: var(--color-paper);
  border: var(--rule-hair) solid var(--color-rule);
  border-left: var(--rule-slab) solid var(--geo-color);
  border-radius: var(--radius-md);
}
.geo--rooms   { --geo-color: var(--color-rooms); }
.geo--studios { --geo-color: var(--color-studios); }

.geo__nome {
  font-size: var(--text-md);
  margin-bottom: var(--space-2xs);
}
.geo__end {
  color: var(--color-ink-2);
  font-size: var(--text-base);
  line-height: 1.5;
  margin-bottom: var(--space-sm);
}

/* ==========================================================================
   Grupos de botões — visita e card do Studios
   ========================================================================== */

.visit__actions,
.unit__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
}
.visit__actions { justify-content: center; margin-top: var(--space-lg); }
.visit__actions .btn { margin-top: 0; }
.unit__ctas { margin-top: var(--space-md); }

/* ==========================================================================
   Reveal — uma entrada orquestrada, só uma vez
   ========================================================================== */

.reveal {
  opacity: 0;
  transform: translateY(10px);
  animation: reveal var(--dur-long) var(--ease-out) forwards;
  animation-delay: calc(var(--i, 0) * 90ms);
}

/* Só o JS aplica .will-reveal — sem JS, tudo nasce visível */
.will-reveal { opacity: 0; transform: translateY(10px); }
.is-in { animation: reveal var(--dur-long) var(--ease-out) forwards; }

@keyframes reveal { to { opacity: 1; transform: none; } }

/* ==========================================================================
   Responsivo — 60rem (layout) e 40rem (tipografia)
   ========================================================================== */

@media (max-width: 60rem) {
  .nav__toggle { display: inline-flex; }

  .nav__menu {
    display: none;
    position: absolute;
    inset-inline: 0;
    top: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-sm);
    padding: var(--space-md) var(--gutter) var(--space-lg);
    background: var(--color-paper);
    border-bottom: var(--rule-slab) solid var(--color-ink);
  }
  .nav__menu.is-open { display: flex; }

  .nav__list { flex-direction: column; align-items: stretch; gap: 0; }
  .nav__list a {
    display: block;
    padding-block: var(--space-xs);
    min-height: 44px;
    border-bottom: var(--rule-hair) solid var(--color-rule);
  }
  .nav__cta { width: 100%; }

  .hero__inner,
  .split {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-lg);
  }

  /* Foto sempre abaixo do texto no celular, mesmo nas linhas invertidas */
  .split--reverse .split__text,
  .split--reverse .split__figure { order: 0; }

  .hero__figure img { aspect-ratio: 4 / 3; }

  .steps { grid-template-columns: minmax(0, 1fr); gap: var(--space-lg); }
  .units { grid-template-columns: minmax(0, 1fr); }
  .amenities { grid-template-columns: minmax(0, 1fr); }
  .contact { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mapa { grid-template-columns: minmax(0, 1fr); gap: var(--space-lg); }
  .mapa__lado { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .nav__brand img { height: 2.75rem; }
  .foot__mark { height: 2.5rem; }

  /* Links do rodapé e do contato ganham área de toque de 44px no celular */
  .foot__links { gap: 0 var(--space-md); width: 100%; }
  .foot__links a,
  .contact__value a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  /* Motivos encolhem no celular — ali o espaço é o recurso escasso */
  .motif--arc-hero { width: 15rem; height: 7.5rem; border-width: 2rem; right: -5rem; }
  .motif--dot-hero { width: 7rem; height: 7rem; left: -3rem; bottom: -1.5rem; }
  .motif--quarter  { width: 8rem; height: 8rem; }
  .motif--arc-small { display: none; }
  .motif--arc-visit { width: 13rem; height: 6.5rem; border-width: 1.5rem; }

  .section { padding-block: var(--space-2xl); }
  .split + .split { margin-top: var(--space-2xl); }

  /* Cabeça de seção sempre em coluna única — Gate 64 */
  .section__head { max-width: none; margin-bottom: var(--space-lg); }

  .wabar { display: flex; }
  body { padding-bottom: 4.5rem; }
}

@media (max-width: 40rem) {
  .section__title { font-size: var(--text-xl); }
  .foot__statement { font-size: var(--text-lg); }
  .contact { grid-template-columns: minmax(0, 1fr); }
  .unit { padding: var(--space-md); }

  /* Tabela empilhada: cada linha vira um bloco com as duas unidades
     uma sob a outra. Rolagem lateral numa comparação é jeito garantido
     de o visitante ler só metade e desistir. */
  .cmp { min-width: 0; display: block; }
  .cmp thead { display: none; }
  .cmp tbody, .cmp tr, .cmp th, .cmp td { display: block; }

  .cmp tbody tr {
    padding-block: var(--space-md);
    border-bottom: var(--rule-hair) solid var(--color-rule);
  }
  .cmp tbody tr:first-child { border-top: var(--rule-slab) solid var(--color-ink); }

  .cmp tbody th {
    width: auto;
    padding: 0 0 var(--space-2xs);
    border: 0;
  }

  .cmp tbody td {
    padding: var(--space-3xs) 0 0 var(--space-md);
    border: 0;
    position: relative;
  }
  .cmp tbody td::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.75em;
    width: 0.5rem;
    height: 2px;
  }
  .cmp tbody td:nth-of-type(1)::before { background: var(--color-rooms); }
  .cmp tbody td:nth-of-type(2)::before { background: var(--color-studios); }

  /* O rótulo sai do modo oculto e passa a nomear a unidade */
  .cmp tbody td .cmp__for {
    position: static;
    width: auto;
    height: auto;
    clip-path: none;
    display: block;
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-muted);
  }

  .hero__actions .btn { flex: 1 1 100%; }
  .unit__ctas .btn,
  .visit__actions .btn { flex: 1 1 100%; }

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

  /* Duas ações na barra fixa: some o texto e aperta o botão para caber
     "Agende uma visita" + "Lista de espera" numa tela de 360px */
  .wabar__text { display: none; }
  .wabar { gap: var(--space-2xs); }
  .wabar__btn {
    flex: 1 1 0;
    min-width: 0;
    padding-inline: var(--space-2xs);
    font-size: var(--text-xs);
    white-space: normal;
    line-height: 1.15;
  }
}

/* ==========================================================================
   Movimento reduzido
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 150ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 150ms !important;
  }
  .reveal, .will-reveal {
    opacity: 1;
    transform: none;
    animation: none;
  }
  .btn:hover { transform: none; }
}