/* Protótipo "Memorial de medição": só var(). Movimento: transform e opacity; uma vez por entrada; reduced-motion = estado final. */
html { background: var(--arco-papel); color: var(--arco-tinta); font-family: var(--arco-fonte-corpo); font-size: var(--fs-corpo); line-height: var(--lh-corpo); scroll-padding-top: var(--arco-cab-h); }
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; }
.mono { font-family: var(--arco-fonte-mono); font-size: var(--arco-fs-mono); letter-spacing: var(--arco-tracking-mono); text-transform: uppercase; color: var(--cor-texto-3); margin: 0; }
.pular { position: absolute; inset-inline-start: var(--s-3); inset-block-start: calc(-1 * var(--s-10)); background: var(--arco-grafite); color: var(--branco); padding: var(--s-3) var(--s-4); z-index: var(--z-modal); }
.pular:focus { inset-block-start: var(--s-3); }
a { color: inherit; }
a:focus-visible, button:focus-visible { outline: var(--borda-foco); outline-offset: var(--foco-deslocamento); }

.cab { display: flex; align-items: center; justify-content: space-between; gap: var(--s-5); min-height: var(--arco-cab-h); padding-inline: var(--gutter); border-bottom: var(--arco-hairline) solid var(--arco-linha); }
.cab__nav { display: none; gap: var(--s-6); }
.cab .cab__cta { display: none; }
.cab__nav a { text-decoration: none; color: var(--arco-tinta); }
.cab__nav a:hover { color: var(--arco-acento); }
@media (min-width: 48rem) { .cab__nav { display: flex; } .cab .cab__cta { display: inline-flex; } }

.btn { font-family: var(--arco-fonte-corpo); display: inline-flex; align-items: center; gap: var(--s-3); min-height: var(--alvo-toque); padding: var(--arco-btn-pad-y) var(--arco-btn-pad-x); border-radius: var(--arco-raio); border: var(--arco-hairline) solid var(--arco-tinta); font: inherit; font-weight: var(--peso-medio); text-decoration: none; cursor: default; transition: background-color var(--arco-dur-2) var(--arco-ease-out-suave), color var(--arco-dur-2) var(--arco-ease-out-suave), border-color var(--arco-dur-2) var(--arco-ease-out-suave); }
.btn--contorno { background: transparent; color: var(--arco-tinta); }
.btn--contorno:hover { border-color: var(--arco-acento); color: var(--arco-acento); }
.btn--cheio { background: var(--arco-acento); border-color: var(--arco-acento); color: var(--branco); }
.btn--cheio:hover { background: transparent; color: var(--arco-acento); }   /* cheio vira contorno (Q Industrial, 0,31 s) */
.btn span[aria-hidden] { transition: transform var(--arco-dur-2) var(--arco-ease-out); }
.btn:hover span[aria-hidden] { transform: translateX(var(--arco-seta-desloc)); }

/* herói: texto à esquerda, prancha à direita, hairline em vez de caixa */
.hero { display: grid; gap: var(--s-7); padding: var(--s-8) var(--gutter); max-width: var(--larg-max); margin-inline: auto; align-items: center; }
@media (min-width: 64rem) { .hero { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); min-height: calc(100svh - var(--arco-cab-h)); } }
.hero__eyebrow { margin-bottom: var(--s-5); }
h1, h2, h3, .srv__t, .et__t, .numgrande { font-family: var(--arco-fonte-display); }
h1, h2 { font-weight: var(--arco-peso-display); letter-spacing: var(--arco-tracking-display); line-height: var(--arco-lh-display); margin: 0; }
h1 { font-size: var(--arco-fs-display); font-weight: var(--arco-peso-display); }
h2 { font-size: var(--arco-fs-h2); }
.hero__sub { font-size: var(--fs-lead); color: var(--cor-texto-2); max-width: var(--larg-texto); margin: var(--s-6) 0; }
.hero__prancha { margin: 0; justify-self: center; width: var(--arco-hero-prancha); }
.malha { padding: var(--s-4); background-image: linear-gradient(var(--arco-linha) var(--arco-hairline), transparent var(--arco-hairline)), linear-gradient(90deg, var(--arco-linha) var(--arco-hairline), transparent var(--arco-hairline)); background-size: var(--arco-malha) var(--arco-malha); border-block: var(--arco-hairline) solid var(--arco-linha-forte); }
.hero__prancha figcaption { margin-top: var(--s-3); font-size: var(--fs-legenda); color: var(--cor-texto-2); }

/* revelação de linha por máscara (Concrete/Berch/Metric): h1 já está no HTML, a máscara só desloca */
.lin { display: block; overflow: hidden; padding-bottom: .14em; margin-bottom: -.14em; }
.lin > span { display: block; transition: transform var(--arco-dur-4) var(--arco-ease-out); transition-delay: calc(var(--n, 0) * var(--arco-stagger-linha)); }
.lin:nth-child(2) > span { --n: 1; }
.js .lin > span { transform: translateY(var(--arco-mascara-desloc)); }
.js .mascara.on .lin > span { transform: none; }

/* elevação que se desenha: stroke-dashoffset com pathLength=1 (Heron); cotas por último; vermelho só na cota */
.elev { display: block; width: 100%; height: auto; fill: none; stroke: var(--arco-traco-desenho); stroke-width: var(--arco-traco); stroke-linecap: square; }
.js .elev .tr { stroke-dasharray: 1; stroke-dashoffset: 1; }
.js .hero.on .elev .tr { stroke-dashoffset: 0; transition: stroke-dashoffset var(--arco-dur-traco) var(--arco-ease-out); transition-delay: calc(var(--i) * var(--arco-atraso-traco)); }
.js .hero.on .cota-txt { opacity: 1; }
.elev .cota { stroke: var(--arco-cota); stroke-width: var(--arco-traco-cota); }
.elev .marca { stroke: var(--arco-linha-forte); }
.elev .fino { stroke-width: var(--arco-traco-fino); }
.js .cota-txt { opacity: 0; transition: opacity var(--arco-dur-3) var(--arco-ease-out) var(--arco-dur-traco); fill: var(--arco-cota); stroke: none; font-family: var(--arco-fonte-mono); font-size: var(--arco-cota-fs); }

.secao { padding: var(--secao-y) var(--gutter); max-width: var(--larg-max); margin-inline: auto; border-top: var(--arco-hairline) solid var(--arco-linha); }
.rot { margin-bottom: var(--s-5); }
.secao h2 { margin-bottom: var(--s-8); }

/* faixa de 4 células hairline abaixo do herói */
.faixa { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); border-block: var(--arco-hairline) solid var(--arco-linha-forte); }
.faixa li { padding: var(--s-4) var(--gutter); border-inline-end: var(--arco-hairline) solid var(--arco-linha); color: var(--cor-texto-2); }
@media (min-width: 48rem) { .faixa { grid-template-columns: repeat(4, 1fr); } }
.tabela { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; border-top: var(--arco-hairline) solid var(--arco-linha-forte); }
@media (min-width: 48rem) { .tabela { grid-template-columns: repeat(4, 1fr); } }
.tabela li { padding: var(--s-5) var(--s-5) var(--s-6) 0; border-bottom: var(--arco-hairline) solid var(--arco-linha); }
.tabela h3 { font-size: var(--fs-h3); font-weight: var(--peso-medio); letter-spacing: var(--arco-tracking-display); line-height: var(--lh-h2); margin: var(--s-3) 0; }
.tabela p { margin: 0; color: var(--cor-texto-2); font-size: var(--fs-legenda); }

/* lista-índice de serviços com prévia de desenho (Berch) */
.indice { display: grid; gap: var(--s-7); }
@media (min-width: 64rem) { .indice { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); } }
.indice__lista { list-style: none; margin: 0; padding: 0; border-top: var(--arco-hairline) solid var(--arco-linha-forte); }
.indice__lista li { border-bottom: var(--arco-hairline) solid var(--arco-linha-forte); }
.srv { display: grid; grid-template-columns: var(--s-8) 1fr auto; gap: var(--s-2) var(--s-4); align-items: baseline; width: 100%; min-height: var(--arco-linha-srv-min); padding: var(--s-4) 0; border: 0; background: transparent; font: inherit; text-align: start; color: var(--cor-texto-3); cursor: pointer; transition: color var(--arco-dur-2) var(--arco-ease-out-suave); }
.srv__t { font-size: var(--arco-fs-srv); font-weight: var(--peso-medio); letter-spacing: var(--arco-tracking-display); color: inherit; }
.srv__d { grid-column: 2; font-size: var(--fs-legenda); }
.srv__seta { grid-column: 3; grid-row: 1; opacity: 0; transform: translateX(calc(-1 * var(--arco-seta-desloc))); transition: opacity var(--arco-dur-2) var(--arco-ease-out-suave), transform var(--arco-dur-2) var(--arco-ease-out); color: var(--arco-acento); }
.srv:hover, .srv:focus-visible, .srv.ativo { color: var(--arco-tinta); }
.srv:hover .srv__seta, .srv:focus-visible .srv__seta, .srv.ativo .srv__seta { opacity: 1; transform: none; }
.indice__prev { position: relative; border: var(--arco-hairline) solid var(--arco-linha-forte); background: var(--branco); padding: var(--s-5); min-height: var(--arco-prev-h); align-self: start; }
.prevbox[hidden] { display: none; }
.prev { width: 100%; height: auto; fill: none; stroke: var(--arco-traco-desenho); stroke-width: var(--arco-traco); }
.prev .cota { stroke: var(--arco-cota); }
.prevbox { animation: entra var(--arco-dur-3) var(--arco-ease-out); }
@keyframes entra { from { opacity: 0; transform: translateY(var(--arco-reveal-y)); } to { opacity: 1; transform: none; } }
.indice__leg { margin-top: var(--s-3); }

/* etapas [ 01 / 05 ] + numeral gigante em contorno e barra de 5 segmentos (a etapa, não o "avanço" da obra) */
.secao--ilha { max-width: none; background: var(--arco-ilha); color: var(--branco); border-top: 0; --borda-foco: var(--borda-foco-ilha); --cor-texto-3: var(--branco-a78); --cor-texto: var(--branco); }
.secao--ilha > * { max-width: var(--larg-max); margin-inline: auto; }
.secao--ilha .mono { color: var(--branco-a78); }
.etapas { display: grid; gap: var(--s-8); }
@media (min-width: 64rem) { .etapas { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); align-items: stretch; } }
.etapas__lista { list-style: none; margin: 0; padding: 0; border-top: var(--arco-hairline) solid var(--arco-linha-ilha); }
.etapas__lista li { border-bottom: var(--arco-hairline) solid var(--arco-linha-ilha); }
.et { display: grid; gap: var(--s-1); width: 100%; padding: var(--s-5) 0; border: 0; background: transparent; font: inherit; text-align: start; color: var(--branco-a78); cursor: pointer; transition: color var(--arco-dur-3) var(--arco-ease-out-suave); }
.et .mono { color: inherit; }
.et__t { font-size: var(--fs-h3); font-weight: var(--arco-peso-display); letter-spacing: var(--arco-tracking-display); line-height: var(--arco-lh-display); }
.et__d { font-size: var(--fs-corpo); }
.et.ativo { color: var(--branco); }
.et.ativo .et__t { font-size: var(--arco-fs-h2); }
.etapas__num { position: relative; display: none; flex-direction: column; justify-content: flex-end; gap: var(--s-5); min-height: var(--arco-prev-h); overflow: hidden; }
@media (min-width: 64rem) { .etapas__num { display: flex; } }
.etapas__marca { position: absolute; inset-inline-end: calc(-1 * var(--s-8)); inset-block-start: 0; width: var(--arco-marca-w); height: auto; opacity: var(--arco-marca-opacidade); }
.numgrande { position: relative; font-size: var(--arco-num-fs); line-height: var(--lh-compacto); font-weight: var(--arco-peso-display); letter-spacing: var(--arco-tracking-display); color: transparent; -webkit-text-stroke: var(--arco-contorno-num) var(--branco-a78); font-variant-numeric: tabular-nums; }
.segs { position: relative; display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--arco-modulo-gap); }
.seg { height: var(--arco-seg-h); background: var(--branco-a28); transition: background-color var(--arco-dur-3) var(--arco-ease-inout); }
.seg.ativo { background: var(--arco-modulo-on); }

.rodape { display: flex; flex-wrap: wrap; gap: var(--s-5); align-items: center; justify-content: space-between; padding: var(--s-7) var(--gutter); border-top: var(--arco-hairline) solid var(--arco-linha); }

@media (prefers-reduced-motion: reduce) {
  .lin > span { transform: none; transition: none; }
  .elev .tr { stroke-dashoffset: 0; transition: none; }
  .prevbox { animation: none; }
  .cota-txt { opacity: 1; transition: none; }
  .seg, .btn, .btn span[aria-hidden], .srv, .srv__seta, .et { transition: none; }
}

/* v3: cenário (versão segura × fatos a confirmar), hero com 2 CTAs, boletim, diálogo */
.so-fatos { display: none; }
[data-cenario="fatos"] .so-fatos { display: revert; }
[data-cenario="fatos"] .so-seguro { display: none; }
.slot { font-style: normal; color: var(--arco-slot-cor); }
.hero__cta { display: flex; flex-wrap: wrap; gap: var(--s-3); margin: 0; }
.hero__nota { margin: var(--s-4) 0 0; font-size: var(--fs-legenda); color: var(--cor-texto-3); }
.btn--contorno-claro { background: transparent; color: var(--branco); border-color: var(--branco-a78); }
.btn--contorno-claro:hover { border-color: var(--branco); }
.rodape .rodape__cta { display: flex; flex-wrap: wrap; gap: var(--s-3); margin: 0; }
.boletim { overflow-x: auto; border-top: var(--arco-hairline) solid var(--arco-linha-forte); }
.boletim table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.boletim caption { text-align: start; padding: var(--s-3) 0; }
.boletim th, .boletim td { text-align: start; padding: var(--arco-boletim-pad) var(--s-3) var(--arco-boletim-pad) 0; border-bottom: var(--arco-hairline) solid var(--arco-linha); }
.boletim th { color: var(--cor-texto-3); }
.boletim .num { text-align: end; color: var(--cor-texto-3); }
.duas { display: grid; gap: var(--s-5); max-width: var(--larg-max); }
@media (min-width: 64rem) { .duas { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-8); } }
.lead { font-size: var(--fs-lead); line-height: var(--lh-corpo); color: var(--cor-texto-2); margin: 0; }
dialog { border: var(--arco-hairline) solid var(--arco-linha-forte); border-radius: var(--arco-raio); padding: var(--s-6); width: min(100% - 2 * var(--gutter), var(--arco-form-w)); background: var(--branco); color: var(--arco-tinta); }
dialog::backdrop { background: var(--arco-ilha); opacity: .72; }
dialog h2 { font-size: var(--arco-fs-h2); margin-bottom: var(--s-3); }
dialog label { display: grid; gap: var(--s-1); margin-top: var(--s-4); font-size: var(--fs-legenda); font-weight: var(--peso-medio); }
dialog input, dialog select { min-height: var(--campo-altura); padding: 0 var(--s-3); border: var(--arco-hairline) solid var(--cor-borda-campo); border-radius: var(--arco-raio); font: inherit; background: var(--branco); }
.dlg__nota { font-size: var(--fs-legenda); color: var(--cor-texto-3); margin: 0; }
.dlg__acoes { display: flex; flex-wrap: wrap; gap: var(--s-3); margin: var(--s-5) 0 0; }
.dlg__res { margin: var(--s-4) 0 0; font-size: var(--fs-legenda); white-space: pre-line; }

/* v3.1: ritmo (ilhas alternadas), planta em todo H2, boletim em destaque, pauta, fecho */
.secao::before { content: ''; display: block; width: var(--s-5); height: var(--s-5); margin-bottom: var(--s-4); background-image: linear-gradient(var(--arco-linha-forte) var(--arco-hairline), transparent var(--arco-hairline)), linear-gradient(90deg, var(--arco-linha-forte) var(--arco-hairline), transparent var(--arco-hairline)); background-size: 100% 50%, 50% 100%; background-position: 0 50%, 50% 0; background-repeat: no-repeat; }
.secao--ilha::before { background-image: linear-gradient(var(--arco-linha-ilha) var(--arco-hairline), transparent var(--arco-hairline)), linear-gradient(90deg, var(--arco-linha-ilha) var(--arco-hairline), transparent var(--arco-hairline)); }
#medicao .boletim { border-top-color: var(--arco-linha-ilha); }
#medicao .boletim th, #medicao .boletim td { border-bottom-color: var(--arco-linha-ilha); font-size: var(--fs-lead); padding-block: var(--s-4); }
#medicao .boletim th { color: var(--branco-a78); font-size: var(--fs-legenda); }
#medicao .boletim .num { color: var(--branco); }
#medicao .boletim caption { color: var(--branco-a78); }
#medicao .boletim td.saldo { color: var(--branco); font-weight: var(--peso-forte); }
#medicao .boletim td.saldo.destaque { color: var(--branco); }
.boletim tr:nth-child(2) td.saldo { color: var(--branco); box-shadow: inset var(--arco-marca-saldo) 0 0 var(--arco-modulo-on); }
.pauta { list-style: none; margin: var(--s-4) 0 0; padding: 0; border-top: var(--arco-hairline) solid var(--arco-linha-forte); }
.pauta li { display: flex; gap: var(--s-4); align-items: baseline; padding: var(--s-3) 0; border-bottom: var(--arco-hairline) solid var(--arco-linha); font-size: var(--fs-lead); }
.hero__fato { margin: var(--s-4) 0 0; }
.rodape { flex-direction: column; align-items: flex-start; }
.fecho { font-family: var(--arco-fonte-display); font-size: var(--arco-fs-h2); font-weight: var(--arco-peso-display); letter-spacing: var(--arco-tracking-display); line-height: var(--arco-lh-display); margin: 0; max-width: var(--larg-texto); }
.rodape > div, .rodape > .rodape__cta { width: 100%; }

/* S3: boletim cabe em 390 px (sem rolagem lateral) */
@media (max-width: 767px) {
  #medicao .boletim th, #medicao .boletim td { font-size: var(--fs-corpo); padding-block: var(--s-3); padding-inline-end: var(--s-2); }
  #medicao .boletim th { font-size: var(--fs-legenda); }
}

/* S3/P26: primeira dobra invertida (grafite), mesmo vocabulário das ilhas */
.hero-ilha { background: var(--arco-ilha); color: var(--branco); --borda-foco: var(--borda-foco-ilha); --cor-texto: var(--branco); --cor-texto-2: var(--branco-a78); --cor-texto-3: var(--branco-a78); }
.hero-ilha .mono, .hero-ilha .hero__nota, .hero-ilha .hero__prancha figcaption { color: var(--branco-a78); }
.hero-ilha .faixa { border-color: var(--arco-linha-ilha); }
.hero-ilha .faixa li { border-color: var(--arco-linha-ilha); }
.hero-ilha .btn--contorno { color: var(--branco); border-color: var(--branco); }
.hero-ilha .elev { stroke: var(--branco-a78); }
.hero-ilha .elev .marca { stroke: var(--branco-a78); }
.hero-ilha .elev .cota { stroke: var(--arco-cota); }
.hero-ilha .cota-txt { fill: var(--branco); }

/* P29: prancha por serviço (moldura e carimbo), marcas de etapa na fachada, pacote como pasta de documentos */
.prancha { margin: 0; border: var(--arco-hairline) solid var(--arco-linha-forte); }
.prancha__moldura { padding: var(--s-5); }
.prancha__carimbo { display: grid; grid-template-columns: 1fr; border-top: var(--arco-hairline) solid var(--arco-linha-forte); }
.prancha__carimbo span { padding: var(--s-2) var(--s-4); border-bottom: var(--arco-hairline) solid var(--arco-linha); }
.prancha__carimbo span:last-child { border-bottom: 0; color: var(--cor-texto-2); }
@media (min-width: 48rem) {
  .prancha__carimbo { grid-template-columns: auto 1fr auto; }
  .prancha__carimbo span { border-bottom: 0; border-inline-end: var(--arco-hairline) solid var(--arco-linha); }
  .prancha__carimbo span:last-child { border-inline-end: 0; }
}
.tag-et text { fill: var(--branco); font-family: var(--arco-fonte-mono); font-size: var(--arco-cota-fs); }
.tag-et path { stroke: var(--branco-a78); }
.tabela { gap: var(--s-4); border-top: 0; }
.tabela li { position: relative; padding: var(--s-6) var(--s-5) var(--s-5); border: var(--arco-hairline) solid var(--arco-linha-forte); border-top-width: var(--arco-traco); background: var(--cor-fundo-suave, transparent); }
.tabela li::after { content: "Rev. A"; position: absolute; top: var(--s-3); right: var(--s-4); font-family: var(--arco-fonte-mono); font-size: var(--fs-legenda); color: var(--cor-texto-3); text-transform: uppercase; }

/* P32: alvos de toque na navegação */
.cab__nav a { padding-block: var(--s-3); }

/* aviso de cookies do protótipo */
.cookies { position: fixed; inset-inline: var(--gutter); bottom: var(--s-4); z-index: var(--z-banner); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-3); max-width: var(--larg-max); margin-inline: auto; padding: var(--s-4); background: var(--cor-fundo); color: var(--cor-texto); border: var(--arco-hairline) solid var(--arco-linha-forte); font-size: var(--fs-legenda); }
.cookies[hidden] { display: none; }
.cookies p { margin: 0; max-width: var(--larg-texto); }
.cookies__acoes { display: flex; gap: var(--s-3); }