/* ═══════════════════════════════════════════════════════════
   PAGINAS INTERNAS, componentes proprios (etapa 7 e item 5.16)
   Carregada so pelas internas que usam estes blocos (solucoes, sobre, cases,
   parceiros, contato e as duas legais), DEPOIS do styles.css. Mora fora do
   styles.css por peso: o styles.css entra em todo artigo de /conteudos, e o
   check.mjs derruba o build quando um artigo passa de 440 KB no fonte (o de
   pit stops ja estava a menos de 1 KB do teto). Tokens e componentes
   compartilhados (.deliv, .icard, .split, .ttable) continuam no styles.css.
   ═══════════════════════════════════════════════════════════ */

/* Arte de linha de cada interna (item 7.5): SVG inline aria-hidden a direita
   do titulo, so acima de 1000px (no celular o H1 e o CTA nao descem). Primeiro
   filho do .pg-wrap, para o ~ limitar o texto sem precisar de :has(). */
.page-hero-art { display: none; }
@media (min-width: 1001px) {
  .page-hero .pg-wrap { --art: clamp(220px, 23vw, 330px); }
  .page-hero-art {
    display: block; position: absolute; top: 50%; right: var(--pad);
    width: var(--art); aspect-ratio: 1; translate: 0 -50%;
    color: rgba(57,233,131,.35); pointer-events: none;
  }
  .page-hero-art svg { display: block; width: 100%; height: 100%; }
  .page-hero-art ~ .page-title { max-width: min(21ch, 100% - var(--art) - 48px); }
  .page-hero-art ~ .page-lead { max-width: min(62ch, 100% - var(--art) - 48px); }
}
@media (min-width: 1001px) and (prefers-reduced-motion: no-preference) {
  .page-hero-art { animation: heroArt .9s var(--ease) .15s both; }
}
@keyframes heroArt { from { opacity: 0; } to { opacity: 1; } }

/* Metodologia em versao clara (itens 7.6 e 7.7). O mesmo stepper da home
   (.method-steps, .method-line, .step-num), agora sobre paper, nas tres
   solucoes e no /sobre, no lugar da .check-list que repetia as quatro etapas.
   A lista e um <ol> de verdade: o .method-steps--paper e so o invólucro que
   segura a linha, porque <ol> so aceita <li> como filho. O main.js ja revela
   todo .method-steps (classe is-visible) e o @supports de animation-timeline
   ja anima todo .method-line span: nenhum JavaScript novo.
   Abaixo de cada etapa, as entregas daquela etapa em chips .deliv, com os
   nomes EXATOS da secao "O que entregamos" da propria pagina (7.7). Janela de
   tempo so na PCO, com o texto que a pagina ja publica. */
.pg-head .prose { margin-top: 16px; }
.method-steps--paper { display: block; }
.method-steps--paper .method-line { background: var(--line-ink); }
.method-steps--paper .method-line span { background: var(--green-ink); box-shadow: none; }
.method-list {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px;
}
.method-steps--paper .step-num {
  color: var(--green-ink); background: #fff;
  border-color: rgba(14,122,60,.35); box-shadow: none;
}
.method-steps--paper .method-step h3 { color: var(--ink-900); }
.method-steps--paper .method-step p { color: var(--ink-700); }
.method-step .deliv { margin-top: 14px; }
.method-step .method-when {
  margin-top: 12px;
  font-family: var(--font-mono); font-size: var(--fs-xs); font-weight: 600;
  letter-spacing: .04em; line-height: 1.5;
}
.method-steps--paper .method-step .method-when { color: var(--green-ink); }
@media (max-width: 1000px) {
  .method-list { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 34px; }
}
@media (max-width: 640px) {
  .method-list { grid-template-columns: 1fr; }
}

/* Paginas legais (item 5.16): sumario lateral fixo no desktop, <details>
   recolhido abaixo de 1000px, e o "Em resumo" no topo do texto. */
.legal-grid { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: clamp(32px, 5vw, 64px); align-items: start; }
.legal-toc { position: sticky; top: calc(var(--header-h) + 16px); }
.legal-toc-h, .legal-toc-m summary {
  font-family: var(--font-mono); font-size: var(--fs-xs); font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; color: var(--green-ink);
}
/* Item 10.21: o "Em resumo" e um <p> dentro de .prose, e o .prose p de
   styles.css (0-1-1) sempre venceu o tamanho e a cor daqui (0-1-0). Com
   styles.css em @layer, esta folha sem camada passaria a vencer e o rotulo
   mudaria de cara; entao ficam so as declaracoes que ja valiam. */
.legal-summary-h {
  font-family: var(--font-mono); font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase;
}
.legal-toc ol, .legal-toc-m ol { list-style: none; margin: 12px 0 0; padding: 0; border-left: 1px solid var(--line-ink); }
.legal-toc a, .legal-toc-m a { display: block; padding: 6px 0 6px 14px; color: var(--ink-700); font-size: var(--fs-sm); line-height: 1.4; }
.legal-toc a:hover, .legal-toc-m a:hover { color: var(--green-ink); }
.legal-toc-m { display: none; }
.legal-summary {
  background: #fff; border: 1px solid var(--line-ink); border-left: 4px solid var(--green-ink);
  border-radius: var(--radius-m); padding: 20px 24px;
}
.prose .legal-summary ul { margin-top: 10px; }
@media (max-width: 1000px) {
  .legal-grid { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .legal-toc { display: none; }
  .legal-toc-m {
    display: block; background: #fff; border: 1px solid var(--line-ink);
    border-radius: var(--radius-m); padding: 0 18px;
  }
  .legal-toc-m summary { display: flex; align-items: center; min-height: 48px; cursor: pointer; }
  .legal-toc-m summary::after { content: '+'; margin-left: auto; font-size: 1.25rem; transition: transform var(--t-fast); }
  .legal-toc-m[open] summary::after { transform: rotate(45deg); }
  .legal-toc-m ol { margin-bottom: 14px; }
  .legal-toc-m a { display: flex; align-items: center; min-height: 44px; padding-block: 4px; font-size: 1rem; }
}

/* Item 7.16: foto e certificado do case dentro de paper herdavam a borda
   branca translucida, a sombra preta .5 e o veu escuro do tema da home. Aqui
   ganham a moldura e a sombra do .split-media; a legenda escura da foto fica,
   porque e ela que garante a leitura sobre a imagem. A home segue com o
   visual escuro (regras base de .case-photo e .case-cert). */
.section--paper .case-photo,
.section--paper .case-cert picture { border-color: var(--line-ink); box-shadow: 0 18px 48px rgba(13,27,38,.14); }
.section--paper .case-photo::after { background: linear-gradient(180deg, transparent 60%, rgba(13,27,38,.45)); }

/* Case CL Aeroporto (itens 7.15 e 7.17): os blocos que viviam em style=
   inline viraram componentes. */
.page-cta > .pg-wrap { position: relative; z-index: 1; }
.case-block-gap { margin-top: 28px; }
.data-note--gap { margin-top: 16px; }
.split--gap { margin-top: 36px; }

/* Faixa de fatos: <dl> com o rotulo no <dt>; column-reverse poe o valor em
   cima so no desenho, a leitura continua rotulo e valor. */
.case-facts { display: flex; flex-wrap: wrap; gap: clamp(28px, 5vw, 64px); margin: 0 0 clamp(32px, 4vw, 48px); }
.case-fact { display: flex; flex-direction: column-reverse; justify-content: flex-end; }
.case-fact dt { margin-top: 8px; color: var(--ink-600); font-size: var(--fs-sm); }
.case-fact dd { margin: .35em 0 0; font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 800; color: var(--ink-900); line-height: 1.1; }
.case-fact--num dd { margin-top: 0; font-family: var(--font-mono); font-size: clamp(2.1rem, 4.5vw, 3rem); color: var(--green-ink); line-height: 1; }
/* Versao compacta, no card do case em /cases */
.case-facts--compact { gap: 16px 28px; margin: 18px 0 0; }
.case-facts--compact .case-fact dd { font-size: 1.2rem; }
.case-facts--compact .case-fact--num dd { font-size: 1.5rem; }

/* Faixa de escopo: sem numero e sem data (o case nao documenta fases). Uma
   grade de 4 no desktop (7 numa linha so partiam "Acompanhamento"); abaixo de 1100px rola com scroll-snap, como o slider de
   depoimentos, e o invólucro e focavel pelo HTML. */
.scope-wrap { margin-top: 8px; }
.scope-wrap:focus-visible { outline: 3px solid var(--green-ink); outline-offset: 2px; }
.scope-strip { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.scope-strip li {
  position: relative;
  background: #fff; border: 1px solid var(--line-ink); border-radius: var(--radius-m);
  padding: 46px 16px 18px;
  color: var(--ink-900); font-weight: 700; font-size: 1rem; line-height: 1.35;
}
.scope-strip li::before {
  content: '';
  position: absolute; left: 18px; top: 20px;
  width: 13px; height: 7px;
  border-left: 2.5px solid var(--green-ink);
  border-bottom: 2.5px solid var(--green-ink);
  transform: rotate(-45deg);
}
@media (max-width: 1100px) {
  .scope-wrap { overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 10px; }
  .scope-strip { display: flex; }
  .scope-strip li { flex: 0 0 min(220px, 72%); scroll-snap-align: start; }
}

/* Destaque com borda verde a esquerda */
.callout--accent {
  background: #fff; border: 1px solid var(--line-ink); border-left: 4px solid var(--green-ink);
  border-radius: var(--radius-l); padding: clamp(24px, 4vw, 44px);
  box-shadow: 0 16px 44px rgba(13,27,38,.08);
}
.callout--accent .prose { max-width: 74ch; }

/* Cards dos dois Golden Trowel (premio da Alphapiso, texto inalterado) */
.award-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px; margin-top: 24px; }
.award-card { background: #fff; border: 1px solid var(--line-ink); border-radius: var(--radius-m); padding: 22px 24px; }
.award-tag { font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: .06em; text-transform: uppercase; color: var(--green-ink); }
.award-name { margin-top: 10px; font-weight: 800; color: var(--ink-900); font-size: 1.05rem; }
.award-data { margin-top: 8px; font-family: var(--font-mono); font-size: var(--fs-sm); color: var(--ink-700); }

/* Galeria: o link e a propria foto; o <dialog> e montado pelo galeria.js. */
.zoom-link { display: block; position: relative; cursor: zoom-in; }
.zoom-link:focus-visible { outline: 3px solid var(--green-ink); outline-offset: 3px; }
.zoom-hint {
  position: absolute; top: 12px; right: 12px; z-index: 2;
  width: 40px; height: 40px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: #fff; background: rgba(10,16,28,.72); border: 1px solid var(--line-2);
}
.case-cert .zoom-link { border-radius: var(--radius-m); }
.case-zoom {
  width: min(1200px, 94vw); max-width: none; max-height: 94vh;
  margin: auto; padding: 0; border: 1px solid var(--line-2); border-radius: var(--radius-l);
  background: var(--bg-1); color: var(--txt-1); overflow: auto;
}
.case-zoom::backdrop { background: rgba(5,10,21,.86); }
.case-zoom-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 8px 8px 18px; }
.case-zoom-h { font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: .08em; text-transform: uppercase; color: var(--txt-2); }
.case-zoom-close {
  width: 44px; height: 44px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: var(--txt-1); background: transparent; border: 1px solid var(--line-ctl); cursor: pointer;
}
.case-zoom-close:hover { border-color: var(--green-neon); color: var(--green-neon); }
.case-zoom img { display: block; width: 100%; height: auto; max-height: 76vh; object-fit: contain; background: #05070c; }
.case-zoom-cap { padding: 12px 18px 18px; color: var(--txt-2); font-size: var(--fs-sm); line-height: 1.5; }

/* Grade de marcas (item 7.18). Era um .icard por logo: 3 colunas com sombra
   e caixa de 108px, e 8 logos em 3 colunas deixavam dois orfaos na ultima
   linha. Agora 4 colunas no desktop e 2 abaixo de 900px (8 fecha nas duas),
   celula baixa, sem sombra nem elevacao, logo em cinza que ganha cor no
   hover. Logotipo e excecao do 1.4.3, e o nome de cada marca esta no alt. */
.logo-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.logo-cell {
  display: flex; align-items: center; justify-content: center;
  min-height: 84px; padding: 16px;
  background: #fff; border: 1px solid var(--line-ink); border-radius: var(--radius-m);
}
.logo-cell img { width: auto; max-width: 100%; height: auto; max-height: 50px; filter: grayscale(1) opacity(.75); transition: filter var(--t-fast); }
.logo-cell:hover img { filter: none; }
@media (max-width: 900px) {
  .logo-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Card inteiro clicavel (itens 7.9 e 7.18): o <a> e o proprio .icard, entao a
   elevacao do sistema de cards vale para ele e o alvo e o cartao todo. */
.icard--case { display: block; color: inherit; margin-top: clamp(28px, 4vw, 40px); }
.icard-more { display: inline-block; margin-top: 14px; color: var(--green-ink); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.icard--case:hover .icard-more { color: var(--ink-900); }
.logo-after { margin-top: 18px; color: var(--ink-700); }
.logo-after a { color: var(--green-ink); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }

/* Imagens do .split empilhado (item 7.8). Abaixo de 1000px a coluna vira a
   largura inteira: o render BIM de 1200x1200 chegava a 828px de altura em
   900px de tela e o retrato do /sobre era ampliado alem do nativo. Faixa de
   no maximo 420px, cortada pelo centro (ou onde a figura pede); o retrato
   fica no tamanho proprio, centralizado, sem corte. */
@media (max-width: 1000px) {
  .split-media img { max-height: 420px; aspect-ratio: 16 / 9; object-fit: cover; }
  .split-media--aerial img { object-position: 50% 70%; }
  .split-media--portrait { max-width: 320px; margin-inline: auto; }
  .split-media--portrait img { aspect-ratio: auto; max-height: none; object-position: top; }
}