/* Bloco L — base do site
   Cores, fontes e componentes comuns (canteiro, ficha de projeto, rolagem suave). */

@font-face {
  font-family: "Pliant";
  src: url("../fonts/Pliant.ttf") format("truetype");
  font-weight: 100 900;
  font-stretch: 50% 200%;
  font-display: swap;
}
@font-face {
  font-family: "Hanken Grotesk";
  src: url("../fonts/HankenGrotesk.ttf") format("truetype");
  font-weight: 100 900;
  font-display: swap;
}

:root {
  /* Paleta oficial (brandbook, p. 27) */
  --luz: #F0EBEB;        /* Luz de Brasília */
  --ceu: #1073AD;        /* Céu de Brasília */
  --aconchego: #553731;  /* Aconchego */
  --ebano: #241512;      /* Ébano */
  --branco: #FFFFFF;

  --tinta: var(--ebano);
  --tinta-suave: rgba(36, 21, 18, .62);
  --linha: rgba(36, 21, 18, .16);
  --fundo: var(--luz);

  --titulo: "Pliant", "Hanken Grotesk", system-ui, sans-serif;
  --texto: "Hanken Grotesk", system-ui, sans-serif;

  --margem: clamp(16px, 2.2vw, 32px);
  --ease: cubic-bezier(.22, .61, .36, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--fundo);
  color: var(--tinta);
  font-family: var(--texto);
  font-weight: 300;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
::selection { background: var(--ceu); color: var(--branco); }

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

/* Revela ao rolar (equivalente ao "appear effect" do Framer) */
[data-revela] { opacity: 0; transform: translateY(24px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
[data-revela].visivel { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  [data-revela] { opacity: 1; transform: none; transition: none; }
}

/* ───────────────────────── Canteiro: elementos que surgem com o tempo ───────────────────────── */
.bl-canteiro {
  position: fixed; inset: 0; z-index: 40;
  pointer-events: none; overflow: hidden;
}
.bl-peca {
  position: absolute; pointer-events: auto; cursor: pointer;
  transform-origin: center center;
  animation: bl-assentar .7s var(--ease) both;
  will-change: transform, opacity;
}
.bl-peca.saindo { animation: bl-retirar .45s var(--ease) both; pointer-events: none; }
.bl-peca svg, .bl-peca img { display: block; width: 100%; height: auto; }
.bl-peca--bloco { filter: drop-shadow(0 10px 18px rgba(36, 21, 18, .22)); }
.bl-peca--planta { mix-blend-mode: multiply; }
.bl-peca--planta.sobre-escuro { mix-blend-mode: screen; }
.bl-peca--azulejo { filter: drop-shadow(0 6px 10px rgba(36, 21, 18, .18)); }
.bl-azulejo {
  width: 100%; aspect-ratio: 1; background: var(--luz);
  position: relative; overflow: hidden;
}
.bl-azulejo i {
  position: absolute; inset: 0; display: block;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-size: 540% 540%; mask-size: 540% 540%;
}
@keyframes bl-assentar {
  from { opacity: 0; transform: var(--t-ini); }
  to   { opacity: 1; transform: var(--t-fim); }
}
@keyframes bl-retirar {
  from { opacity: 1; transform: var(--t-fim); }
  to   { opacity: 0; transform: var(--t-ini); }
}
@media (prefers-reduced-motion: reduce) {
  .bl-peca, .bl-peca.saindo { animation-duration: .01s; }
}

[hidden] { display: none !important; }

/* ───────────────────────── Ficha de projeto (overlay) ───────────────────────── */
.bl-ficha {
  position: fixed; inset: 0; z-index: 60; background: var(--ficha-fundo, var(--luz)); color: var(--ficha-tinta, var(--ebano));
  overflow-y: auto; overscroll-behavior: contain;
  opacity: 0; visibility: hidden; transition: opacity .5s var(--ease), visibility 0s .5s;
}
.bl-ficha.aberta { opacity: 1; visibility: visible; transition: opacity .5s var(--ease); }
/* "> .topo" e os resets: as páginas também têm um cabeçalho .topo (fixo, cor clara) que vazava para a ficha. */
.bl-ficha > .topo {
  position: sticky; top: 0; right: auto; bottom: auto; left: auto; z-index: 2;
  display: flex; justify-content: space-between; align-items: center;
  padding: 18px var(--margem); background: var(--ficha-fundo, var(--luz)); color: inherit;
  -webkit-backdrop-filter: none; backdrop-filter: none; transition: none;
  font-size: 12px; text-transform: uppercase; letter-spacing: .06em; font-weight: 500;
}
.bl-ficha .topo button { text-transform: uppercase; letter-spacing: .06em; font-weight: 500; }
.bl-ficha .topo button:hover { color: var(--ceu); }
.bl-ficha .ficha-logo { display: block; }
.bl-ficha .ficha-logo img { height: 34px; width: auto; transition: opacity .2s; }
.bl-ficha .ficha-logo:hover img { opacity: .7; }
.bl-ficha .cabeca {
  display: grid; grid-template-columns: 1.1fr 1fr; gap: 4vw;
  padding: 6vh var(--margem) 5vh; align-items: end;
}
.bl-ficha .numero { font-family: var(--titulo); font-weight: 300; font-size: clamp(16px, 1.4vw, 20px); color: var(--ceu); }
.bl-ficha h2 { margin: .2em 0 0; font-family: var(--titulo); font-weight: 400; font-size: clamp(36px, 5.4vw, 84px); line-height: 1; letter-spacing: -.01em; }
.bl-ficha .meta { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 18px; font-size: 13px; color: var(--tinta-suave); }
.bl-ficha .texto p { margin: 0 0 1em; font-size: clamp(15px, 1.15vw, 18px); max-width: 52ch; }
.bl-ficha .galeria {
  display: grid; grid-template-columns: repeat(12, 1fr); gap: 12px; padding: 0 var(--margem) 10vh;
}
.bl-ficha .galeria figure { margin: 0; grid-column: span 4; }
.bl-ficha .galeria figure.largo { grid-column: span 8; }
.bl-ficha .galeria figure.cheio { grid-column: 1 / -1; }
.bl-ficha .galeria img { width: 100%; height: 100%; object-fit: cover; background: rgba(36,21,18,.06); }
.bl-ficha .galeria figcaption { font-size: 11px; color: var(--tinta-suave); margin-top: 6px; }
.bl-ficha .galeria .planta-par { display: flex; justify-content: center; gap: 6vw; background: #fff; padding: 5vh 4vw; }
.bl-ficha .galeria .planta-par > div { display: flex; flex-direction: column; align-items: center; }
.bl-ficha .galeria .planta-par img { object-fit: contain; width: auto; height: min(62vh, 640px); background: none; }
@media (max-width: 760px) {
  .bl-ficha .cabeca { grid-template-columns: 1fr; }
  .bl-ficha .galeria figure, .bl-ficha .galeria figure.largo { grid-column: 1 / -1; }
}

/* ───────────────────────── Rolagem suave (Lenis, a partir do P7) ───────────────────────── */
/* Regras do lenis.css 1.3.26. Só valem quando assets/js/rolagem.js liga a rolagem suave (classe .lenis no <html>). */
html.lenis, html.lenis body { height: auto; }
.lenis:not(.lenis-autoToggle).lenis-stopped { overflow: clip; }
.lenis [data-lenis-prevent], .lenis [data-lenis-prevent-wheel], .lenis [data-lenis-prevent-touch],
.lenis [data-lenis-prevent-vertical], .lenis [data-lenis-prevent-horizontal] { overscroll-behavior: contain; }
.lenis.lenis-smooth iframe { pointer-events: none; }