/* =========================================================================
   VERDEO — direção de arte (projeto conceitual)
   Estúdio contemporâneo de arquitetura e paisagismo.

   CONCEITO: "desenhada a partir do terreno". Onde a Aurea é cerimonial e
   vertical, a Verdeo é HORIZONTAL e respirada: linhas longas, entrelinha
   generosa, caixa alta só em rótulos curtos, e desenho técnico no lugar de
   fotografia.

   REGRA DE OURO DESTA IDENTIDADE: a imagem nunca é decorativa. Toda peça
   gráfica é um desenho de projeto — planta, corte, matriz de plantio ou
   estudo de luz. Se não puder ser cotada, não entra.

   Escopo: [data-project="verdeo"].
   ========================================================================= */

[data-project="verdeo"] {
  /* --- paleta --- */
  --vd-bark: #1C1E19;
  --vd-bark-raised: #262922;
  --vd-stone: #EDE9E1;
  --vd-stone-dim: #D6D0C4;
  --vd-clay: #B98A63;
  --vd-sage: #7C8C6F;
  --vd-moss: #3E4A38;

  --vd-line-on-dark: rgba(237, 233, 225, 0.14);
  --vd-line-on-light: rgba(28, 30, 25, 0.16);

  /* --- tipografia --- */
  --vd-display: 'Instrument Serif', 'Bodoni Moda', Georgia, serif;
  --vd-text: 'Cabinet Grotesk', 'General Sans', -apple-system, Arial, sans-serif;

  --vd-track-nav: 0.19em;
  --vd-track-label: 0.24em;
}

/* ================= MARCA ================= */
.vd-mark { color: var(--vd-stone); width: 100%; height: auto; }

.vd-stage { display: grid; place-items: center; padding: clamp(28px, 5vw, 56px); background: var(--vd-bark); min-height: 240px; }
.vd-stage--light { background: var(--vd-stone); }
.vd-stage--light .vd-mark { color: var(--vd-bark); }
.vd-stage--sage { background: var(--vd-moss); }

.vd-lockup { display: grid; gap: 20px; justify-items: center; color: var(--vd-stone); text-align: center; }
.vd-lockup .vd-mark { width: 72px; }
.vd-lockup__word {
  font-family: var(--vd-display);
  font-size: clamp(1.8rem, 1.1rem + 2.4vw, 2.8rem);
  letter-spacing: 0.22em;
  text-indent: 0.22em;
  line-height: 1;
}
.vd-lockup__descriptor {
  font-family: var(--vd-text);
  font-size: 10px;
  letter-spacing: var(--vd-track-label);
  text-indent: var(--vd-track-label);
  text-transform: uppercase;
  color: var(--vd-sage);
}
.vd-lockup--inline { grid-auto-flow: column; align-items: center; gap: 16px; }
.vd-lockup--inline .vd-mark { width: 30px; }
.vd-lockup--inline .vd-lockup__word { font-size: 1.35rem; }

/* ================= CHROME DE DISPOSITIVO ================= */
/* O "navegador" é CSS, não imagem: a peça continua editável e o texto do
   conceito de site continua sendo texto real, selecionável e traduzível. */
.vd-browser { background: #14150F; border-radius: 8px; padding: 8px; }
.vd-browser__bar { display: flex; align-items: center; gap: 7px; padding: 6px 8px 10px; }
.vd-browser__dot { width: 8px; height: 8px; border-radius: 50%; background: #4A4C40; }
.vd-browser__url {
  margin-left: auto;
  margin-right: auto;
  transform: translateX(-14px);
  background: #22241D;
  color: #7E8274;
  font-size: 9px;
  padding: 3px 22px;
  border-radius: 8px;
}
.vd-browser__screen { background: var(--vd-bark); overflow: hidden; }

.vd-phone { background: #14150F; border-radius: 26px; padding: 9px; max-width: 300px; margin-inline: auto; }
.vd-phone__screen { background: var(--vd-bark); border-radius: 18px; overflow: hidden; position: relative; }
.vd-phone__notch {
  position: absolute;
  top: 8px; left: 50%;
  transform: translateX(-50%);
  width: 84px; height: 18px;
  background: #14150F;
  border-radius: 10px;
  z-index: 2;
}

/* ================= NAVEGAÇÃO DO SITE ================= */
.vd-nav {
  display: flex;
  align-items: center;
  gap: clamp(14px, 2.4vw, 34px);
  padding: 20px clamp(16px, 3vw, 34px);
  border-bottom: 1px solid var(--vd-line-on-dark);
  font-family: var(--vd-text);
}
.vd-nav__brand {
  font-family: var(--vd-display);
  font-size: clamp(15px, 1.6vw, 21px);
  letter-spacing: 0.2em;
  color: var(--vd-stone);
}
.vd-nav__links { display: flex; gap: clamp(12px, 2vw, 26px); margin-inline: auto; }
.vd-nav__links a {
  font-size: clamp(8.5px, 0.85vw, 10px);
  letter-spacing: var(--vd-track-nav);
  text-transform: uppercase;
  color: var(--vd-stone-dim);
  padding-bottom: 4px;
  border-bottom: 1px solid transparent;
  transition: border-color 200ms ease, color 200ms ease;
}
.vd-nav__links a:hover,
.vd-nav__links a[aria-current="page"] { color: var(--vd-stone); border-bottom-color: var(--vd-clay); }
.vd-nav__cta {
  border: 1px solid rgba(237, 233, 225, 0.34);
  padding: 8px 16px;
  font-size: clamp(8.5px, 0.85vw, 10px);
  letter-spacing: var(--vd-track-nav);
  text-transform: uppercase;
  color: var(--vd-stone);
  white-space: nowrap;
}
.vd-nav__cta:hover { background: var(--vd-stone); color: var(--vd-bark); }

/* ================= HERO DO SITE ================= */
.vd-hero { display: grid; grid-template-columns: 1.05fr 1fr; min-height: 380px; }
.vd-hero__copy { padding: clamp(24px, 4vw, 52px); display: grid; align-content: center; gap: 22px; }
.vd-hero__title {
  font-family: var(--vd-display);
  font-weight: 400;
  font-size: clamp(1.7rem, 0.6rem + 3.2vw, 3rem);
  line-height: 1.08;
  letter-spacing: 0.015em;
  text-transform: uppercase;
  color: var(--vd-stone);
}
.vd-hero__sub {
  font-family: var(--vd-text);
  font-size: clamp(11px, 1.1vw, 14px);
  line-height: 1.65;
  color: var(--vd-stone-dim);
  max-width: 26ch;
}
.vd-hero__cta {
  justify-self: start;
  border: 1px solid rgba(237, 233, 225, 0.42);
  padding: 11px 22px;
  font-family: var(--vd-text);
  font-size: clamp(9px, 0.9vw, 10.5px);
  letter-spacing: var(--vd-track-nav);
  text-transform: uppercase;
  color: var(--vd-stone);
}
.vd-hero__cta:hover { background: var(--vd-clay); border-color: var(--vd-clay); color: var(--vd-bark); }
.vd-hero__media { background: #DCC9AE; overflow: hidden; }
.vd-hero__media img,
.vd-hero__media svg { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Mobile: a coluna vira pilha e a imagem passa a ser uma faixa. */
.vd-phone .vd-hero { grid-template-columns: 1fr; min-height: 0; }
.vd-phone .vd-hero__media { height: 168px; order: 2; }
.vd-phone .vd-hero__copy { padding: 26px 20px 30px; gap: 16px; }
.vd-phone .vd-hero__title { font-size: 1.42rem; }
.vd-phone .vd-hero__sub { font-size: 11px; }
/* O notch é absoluto e ocupa de 8px a 26px do topo da tela; a nav precisa
   começar depois dele, senão a marca fica debaixo do recorte. */
.vd-phone .vd-nav { padding: 34px 20px 16px; }
.vd-phone .vd-nav__links { display: none; }
.vd-phone .vd-nav__cta { margin-left: auto; padding: 7px 12px; }

/* ================= GRID DE PROJETOS ================= */
.vd-projects { padding: clamp(22px, 3.4vw, 44px); background: var(--vd-stone); }
.vd-projects__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 16px;
  margin-bottom: clamp(18px, 2.6vw, 30px);
  border-bottom: 1px solid var(--vd-line-on-light);
}
.vd-projects__title {
  font-family: var(--vd-display);
  font-weight: 400;
  font-size: clamp(1.1rem, 0.7rem + 1.2vw, 1.7rem);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--vd-bark);
}
.vd-projects__count { font-family: var(--vd-text); font-size: 10px; letter-spacing: var(--vd-track-label); color: var(--vd-clay); }

.vd-grid { display: grid; gap: clamp(14px, 2vw, 26px); grid-template-columns: 1fr; }
@media (min-width: 620px) { .vd-grid { grid-template-columns: repeat(3, 1fr); } }
.vd-phone .vd-grid { grid-template-columns: 1fr; }

.vd-project { display: grid; gap: 12px; }
.vd-project__figure { border: 1px solid var(--vd-line-on-light); overflow: hidden; background: #fff; }
.vd-project__figure img { width: 100%; height: auto; display: block; }
.vd-project__meta { display: grid; gap: 4px; }
.vd-project__name {
  font-family: var(--vd-display);
  font-size: clamp(13px, 1.3vw, 17px);
  letter-spacing: 0.05em;
  color: var(--vd-bark);
}
.vd-project__spec {
  font-family: var(--vd-text);
  font-size: 9.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #6E6A5F;
}
.vd-project__type { color: var(--vd-sage); }

/* ================= DETALHES DE NAVEGAÇÃO ================= */
.vd-detail { background: var(--vd-bark); padding: clamp(22px, 3vw, 34px); display: grid; gap: 20px; }
.vd-detail__row { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 26px; }
.vd-detail__label {
  font-family: var(--vd-text);
  font-size: 9.5px;
  letter-spacing: var(--vd-track-label);
  text-transform: uppercase;
  color: #7A7768;
  min-width: 120px;
}
.vd-breadcrumb { display: flex; gap: 10px; font-family: var(--vd-text); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--vd-stone-dim); }
.vd-breadcrumb span:not(:last-child)::after { content: " /"; color: var(--vd-clay); }
.vd-pager { display: flex; gap: 8px; font-family: var(--vd-text); font-size: 10px; }
.vd-pager span {
  width: 30px; height: 30px;
  display: grid; place-items: center;
  border: 1px solid var(--vd-line-on-dark);
  color: var(--vd-stone-dim);
}
.vd-pager span[aria-current] { border-color: var(--vd-clay); color: var(--vd-clay); }

/* ================= ESPÉCIMES TIPOGRÁFICOS ================= */
.vd-type-display {
  font-family: var(--vd-display);
  font-weight: 400;
  font-size: clamp(2rem, 1rem + 3.6vw, 3.4rem);
  line-height: 1.1;
  letter-spacing: 0.015em;
  text-transform: uppercase;
}
.vd-type-lede { font-family: var(--vd-display); font-size: clamp(1.1rem, 0.8rem + 1.1vw, 1.6rem); line-height: 1.45; }
.vd-type-nav { font-family: var(--vd-text); font-size: 12px; letter-spacing: var(--vd-track-nav); text-transform: uppercase; }
.vd-type-body { font-family: var(--vd-text); font-size: 16px; line-height: 1.78; max-width: 50ch; }
.vd-type-spec { font-family: var(--vd-text); font-size: 10px; letter-spacing: var(--vd-track-label); text-transform: uppercase; color: var(--vd-clay); }