/* =========================================================
   Veliovich Arquitetura — páginas internas (projetos, privacidade, 404)
   Carregado DEPOIS de style.css. Reaproveita de lá: .header, .lockup, .btn, .link,
   .mono, .menu-btn/.menu, .wa-float, .footer__info e os temas .t-*.
   Aqui só entram classes com prefixo pp-.

   Ideia da página de projeto: uma prancha. Nome, cota e fachada dividem o mesmo
   eixo e a mesma largura (--pp-col): a cota sob o nome "mede" o prédio, que
   aparece inteiro, do topo à base. Ficha e descrição ficam ao lado, como anotações.
   ========================================================= */

.pp-page {
  --pp-col: calc(100vw - 2 * var(--g));   /* eixo central: nome = cota = fachada */
  --pp-gap: clamp(24px, 3vw, 56px);
  --pp-muted: #c9c6bf;
  --pp-rule: rgba(239, 237, 232, .18);
  --pp-orange-ink: #AD3A0E;               /* laranja para texto pequeno sobre fundo claro (5,3:1 no papel) */
}
@media (min-width: 640px)  { .pp-page { --pp-col: min(72vw, 560px); } }
@media (min-width: 1100px) { .pp-page { --pp-col: min(42vw, 66vh); } }

html:has(.pp-page) { scroll-padding-top: 88px; }
@media (prefers-reduced-motion: no-preference) { html:has(.pp-page) { scroll-behavior: smooth; } }

/* utilitários */
.pp-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; }
.pp-skip { position: fixed; left: var(--g); top: 12px; z-index: 120; padding: 12px 16px; background: var(--orange); color: var(--ink); font-family: var(--mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; transform: translateY(-160%); transition: transform .3s var(--ease); }
.pp-skip:focus { transform: none; }
.pp-page a:focus-visible, .pp-page button:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; }
.pp-page .t-orange a:focus-visible { outline-color: var(--ink); }

/* ---------- trilha (breadcrumb) ---------- */
.pp-crumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 0 10px; }
.pp-crumbs li { display: flex; align-items: center; gap: 10px; }
.pp-crumbs li + li::before { content: "/"; opacity: .45; }
.pp-crumbs a { opacity: .72; border-bottom: 1px solid transparent; transition: opacity .3s, border-color .3s; }
.pp-crumbs a:hover { opacity: 1; border-color: currentColor; }
.pp-crumbs [aria-current] { color: var(--orange); }
.t-paper .pp-crumbs [aria-current], .t-grey .pp-crumbs [aria-current] { color: var(--pp-orange-ink); }
@media (hover: none), (pointer: coarse) { .pp-crumbs a { display: inline-flex; align-items: center; min-height: 44px; } }

/* ---------- nome em lockup: mesma largura da fachada ---------- */
.pp-lockup { width: var(--pp-col); font-size: calc(var(--pp-col) / var(--em, 3)); }
.pp-lockup .lockup__name { display: block; margin: 0; font-size: 1em; text-align: center; white-space: nowrap; overflow: hidden; padding-top: .02em; }
.pp-lockup .lockup__name > span { display: inline-block; }
.pp-lockup .lockup__cota { height: 14px; margin-top: clamp(10px, .07em, 22px); }
.pp-lockup .lockup__word { font-size: 12px; letter-spacing: .28em; }

/* ---------- capa: a prancha ---------- */
.pp-hero { padding: 104px var(--g) clamp(72px, 13vh, 150px); }
.pp-plate { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; }
.pp-plate > .pp-lockup { margin-top: clamp(20px, 3.4vh, 36px); }
.pp-facade { width: var(--pp-col); margin-top: clamp(28px, 5vh, 56px); background: #222; overflow: hidden; } /* a fachada entra com zoom: não pode vazar a tela */
.pp-facade img { width: 100%; }

.pp-ficha, .pp-about { width: var(--pp-col); }
.pp-ficha { margin: 36px 0 0; }
.pp-ficha div { display: grid; grid-template-columns: 9.5em minmax(0, 1fr); gap: 12px; padding: 12px 0; border-top: 1px solid var(--pp-rule); }
.pp-ficha div:last-child { border-bottom: 1px solid var(--pp-rule); }
.pp-ficha dt { opacity: .62; }
.pp-ficha dd { margin: 0; }
.pp-ficha .st { color: var(--orange); }
.pp-about { margin-top: 32px; }
.pp-about .link { display: inline-block; max-width: 100%; } /* em coluna estreita a seta acompanha a última palavra */
.pp-about .link span { display: inline-block; }
.pp-lead { margin: 0 0 26px; font-size: clamp(18px, 1.3vw, 21px); line-height: 1.5; color: var(--pp-muted); max-width: 36ch; text-wrap: pretty; }

@media (min-width: 1100px) {
  .pp-plate { grid-template-columns: minmax(0, 1fr) var(--pp-col) minmax(0, 1fr); column-gap: var(--pp-gap); align-items: start; }
  .pp-plate > .pp-crumbs, .pp-plate > .pp-lockup { grid-column: 2; }
  .pp-facade { grid-column: 2; grid-row: 3; }
  /* anotações à esquerda e à direita do prédio, acompanhando a rolagem */
  .pp-ficha, .pp-about { grid-row: 3; width: auto; position: sticky; top: 112px; margin-top: clamp(28px, 5vh, 56px); }
  .pp-ficha { grid-column: 1; justify-self: end; width: min(100%, 320px); text-align: right; }
  .pp-ficha div { grid-template-columns: 1fr; gap: 4px; }
  .pp-about { grid-column: 3; justify-self: start; }
}

/* ---------- galeria editorial ---------- */
.pp-gallery { padding: clamp(72px, 14vh, 160px) var(--g); display: grid; gap: clamp(56px, 11vh, 132px); }
.pp-fig { margin: 0; min-width: 0; }
.pp-frame { overflow: hidden; background: #d6d3cc; }
.pp-frame img { width: 100%; }
.pp-row { display: grid; gap: 40px; }
@media (max-width: 899px) {
  .pp-row .pp-fig--b, .pp-row .pp-fig--p { width: 78%; margin-left: auto; }
}
@media (min-width: 900px) {
  .pp-fig--bleed { margin: 0 calc(var(--g) * -1); }
  .pp-fig--bleed .pp-frame img { max-height: 100vh; object-fit: cover; object-position: 50% 62%; }
  .pp-fig--bleed .pp-cap { margin-left: var(--g); margin-right: var(--g); }
  .pp-row { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--pp-gap); align-items: start; }
  .pp-fig--a  { grid-column: 1 / span 7; }
  .pp-fig--b  { grid-column: 8 / span 5; margin-top: 18vh; }
  .pp-fig--wl { grid-column: 1 / span 8; }
  .pp-fig--wr { grid-column: 5 / span 8; }
  .pp-fig--p  { grid-column: 7 / span 5; }
}

/* legenda como cota: |— texto ——————| */
.pp-cap { display: flex; align-items: center; margin-top: 14px; }
.pp-cap i { flex: none; width: 1px; height: 11px; background: currentColor; }
.pp-cap b { flex: 1; height: 1px; background: currentColor; opacity: .45; }
.pp-cap b:first-of-type { flex: 0 0 22px; }
.pp-cap span { padding: 0 12px; white-space: nowrap; }

/* ---------- chamada ---------- */
.pp-cta { padding: clamp(88px, 16vh, 180px) var(--g); display: grid; justify-items: center; text-align: center; gap: 22px; }
.pp-cta__title { margin: 0; font-family: var(--display); font-weight: 600; text-transform: uppercase; font-size: clamp(38px, 10vw, 88px); line-height: 1; max-width: 14ch; text-wrap: balance; }
.pp-cta__sub { margin: 0; max-width: 40ch; font-size: 17px; }
.pp-cta__btns { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 10px; }
@media (min-width: 900px) { .pp-cta__title { font-size: var(--d2); } }
@media (max-width: 520px) { .pp-cta__btns { display: grid; grid-template-columns: minmax(0, 1fr); width: min(100%, 360px); } .pp-cta__btns .btn { justify-content: center; } }

/* ---------- próximo projeto ---------- */
.pp-next { padding: clamp(72px, 13vh, 150px) var(--g) 0; border-bottom: 1px solid var(--pp-rule); overflow: hidden; }
.pp-next__link { display: grid; justify-items: center; }
.pp-next__label { display: flex; align-items: center; gap: 12px; color: var(--orange); margin-bottom: clamp(20px, 3.4vh, 36px); }
.pp-next__img { display: block; width: var(--pp-col); height: clamp(260px, 52vh, 560px); margin-top: clamp(28px, 5vh, 56px); overflow: hidden; }
.pp-next__img img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; filter: grayscale(.25) brightness(.82); transition: filter .7s var(--ease), transform 1.2s var(--ease); }
.pp-next__arrow { display: inline-block; transition: transform .45s var(--ease); }
.pp-next__link:hover .pp-next__img img, .pp-next__link:focus-visible .pp-next__img img { filter: none; transform: scale(1.03); }
.pp-next__link:hover .pp-next__arrow, .pp-next__link:focus-visible .pp-next__arrow { transform: translateX(6px); }
.pp-next__link:focus-visible { outline-offset: -2px; }

/* ---------- rodapé ---------- */
.pp-foot { padding: clamp(64px, 12vh, 132px) var(--g) 40px; }
.pp-foot__lockup { font-size: clamp(30px, 6.6vw, 96px); margin-bottom: clamp(32px, 6vh, 64px); }
.pp-foot .footer__info { margin-top: clamp(40px, 8vh, 88px); }
.pp-foot .footer__copy a { border-bottom: 1px solid currentColor; }
@media (min-width: 900px) { .pp-foot .footer__info { grid-template-columns: repeat(3, minmax(0, 1fr)) auto; align-items: start; } }
@media (hover: none), (pointer: coarse) { .pp-foot .footer__info a { min-height: 44px; display: inline-flex; align-items: center; padding: 0; } }

/* ---------- entrada da capa: um único momento (sem JS de animação) ---------- */
@keyframes pp-rise { from { transform: translateY(105%); } }
@keyframes pp-grow { from { transform: scaleX(0); } }
@keyframes pp-fade { from { opacity: 0; } }
@keyframes pp-curtain { from { clip-path: inset(100% 0 0 0); } }
@keyframes pp-zoom { from { transform: scale(1.12); } }
.js:not(.reduce) .pp-hero .lockup__name > span { animation: pp-rise 1s var(--ease) .1s both; }
.js:not(.reduce) .pp-hero .lockup__cota .l { animation: pp-grow .9s var(--ease) .4s both; }
.js:not(.reduce) .pp-hero .lockup__cota i, .js:not(.reduce) .pp-hero .lockup__word { animation: pp-fade .5s ease .7s both; }
.js:not(.reduce) .pp-hero .pp-facade { animation: pp-curtain 1.3s var(--ease) .45s both; }
.js:not(.reduce) .pp-hero .pp-facade img { animation: pp-zoom 1.9s cubic-bezier(.16, 1, .3, 1) .45s both; }

/* revelação das imagens da galeria (js/projeto.js adiciona .pp-io e depois .is-in) */
.pp-reveal { overflow: hidden; } /* a imagem entra ampliada: não pode vazar a largura da tela */
.pp-io .pp-reveal { clip-path: inset(100% 0 0 0); transition: clip-path 1.2s var(--ease); }
.pp-io .pp-reveal img { transform: scale(1.08); transition: transform 1.7s cubic-bezier(.16, 1, .3, 1); }
.pp-io .pp-reveal.is-in { clip-path: inset(0 0 0 0); }
.pp-io .pp-reveal.is-in img { transform: none; }

@media (prefers-reduced-motion: reduce) {
  .pp-io .pp-reveal { clip-path: none; }
  .pp-io .pp-reveal img { transform: none; }
}

/* =========================================================
   Política de privacidade
   ========================================================= */
.pp-doc { padding: 112px var(--g) clamp(72px, 12vh, 140px); }
.pp-doc__head { max-width: 1200px; margin: 0 auto; }
.pp-doc__head .pp-crumbs ol { justify-content: flex-start; }
.pp-doc__title { margin: 28px 0 18px; font-family: var(--display); font-weight: 600; text-transform: uppercase; font-size: clamp(42px, 11vw, 120px); line-height: 1.02; text-wrap: balance; }
.pp-doc__date { margin: 0; color: var(--grey); }
.pp-doc__lead { margin: 28px 0 0; max-width: 46ch; font-size: clamp(19px, 1.6vw, 23px); line-height: 1.45; }
.pp-doc__body { max-width: 1200px; margin: clamp(48px, 9vh, 96px) auto 0; display: grid; gap: 40px; }
.pp-doc__toc ol { list-style: none; margin: 0; padding: 0; display: grid; border-top: 1px solid rgba(23,23,23,.2); }
.pp-doc__toc a { display: flex; gap: 12px; align-items: center; min-height: 44px; padding: 6px 0; border-bottom: 1px solid rgba(23,23,23,.2); }
.pp-doc__toc a span { color: var(--pp-orange-ink); }
.pp-doc__toc a:hover { color: var(--pp-orange-ink); }
.pp-doc__text { max-width: 68ch; }
.pp-doc__text section { padding: 28px 0 8px; border-top: 1px solid rgba(23,23,23,.2); }
.pp-doc__text section:first-child { border-top: 0; padding-top: 0; }
.pp-doc__text h2 { display: flex; gap: 14px; align-items: baseline; margin: 0 0 14px; font-family: var(--display); font-weight: 500; text-transform: uppercase; font-size: clamp(24px, 2.4vw, 32px); line-height: 1.2; }
.pp-doc__text h2 .mono { color: var(--pp-orange-ink); }
.pp-doc__text p, .pp-doc__text li { font-size: 17px; line-height: 1.6; }
.pp-doc__text p { margin: 0 0 16px; }
.pp-doc__text ul { margin: 0 0 16px; padding-left: 1.2em; }
.pp-doc__text li { margin-bottom: 6px; }
.pp-doc__text li::marker { color: var(--pp-orange-ink); }
.pp-doc__text a { border-bottom: 1px solid currentColor; }
.pp-doc__text a:hover { color: var(--pp-orange-ink); }
.pp-doc__text strong { font-weight: 600; }
@media (hover: none), (pointer: coarse) { .pp-doc__text a { padding: 12px 0; } } /* área de toque maior sem mexer na linha */
@media (min-width: 960px) {
  .pp-doc__body { grid-template-columns: 260px minmax(0, 1fr); column-gap: clamp(48px, 8vw, 140px); align-items: start; }
  .pp-doc__toc { position: sticky; top: 104px; }
}

/* =========================================================
   404
   ========================================================= */
.pp-404 { min-height: 100vh; min-height: 100svh; padding: 104px var(--g) 48px; display: grid; gap: 40px; align-content: center; }
.pp-404__code { margin: 0; color: var(--orange); }
.pp-404__title { margin: 18px 0 20px; font-family: var(--display); font-weight: 600; text-transform: uppercase; font-size: clamp(40px, 10vw, 92px); line-height: 1.2; max-width: 16ch; text-wrap: balance; } /* acentos do Oswald são altos: abaixo de 1.2 o "Á" encosta na linha de cima */
.pp-404__text > p { margin: 0; color: var(--pp-muted); max-width: 40ch; }
.pp-404__btns { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.pp-404__more { margin-top: 30px; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 18px; }
.pp-404__more span { opacity: .62; }
.pp-404__more a { display: inline-flex; align-items: center; min-height: 44px; border-bottom: 1px solid transparent; }
.pp-404__more a:hover { color: var(--orange); border-color: currentColor; }
.pp-404__fig { justify-self: center; width: min(72%, 320px); }
.pp-404__fig .pp-cap { color: var(--pp-muted); }
@media (min-width: 900px) {
  .pp-404 { grid-template-columns: minmax(0, 1fr) auto; column-gap: 6vw; padding-bottom: 0; align-items: end; }
  .pp-404__text { align-self: center; }
  .pp-404__fig { width: auto; }
  .pp-404__fig img { height: min(78vh, 760px); width: auto; }
}
@media (max-width: 520px) { .pp-404__btns { display: grid; grid-template-columns: minmax(0, 1fr); } .pp-404__btns .btn { justify-content: center; } }