/* Sem animação: foto pronta, traçado discreto e legenda permanente. */
.obra {
  --obra-top: calc(var(--bar-h, 72px) + 24px);
  --obra-line: color-mix(in srgb, var(--white) 85%, transparent);
  --obra-guide: color-mix(in srgb, var(--white) 18%, transparent);
  color: var(--white);
  padding: 0 0 var(--secao, 120px); /* fundo da página (degradê) aparece, como nas outras seções */
}
.obra__inner { width: min(100% - 2 * var(--gutter), var(--page)); margin-inline: auto; }
.obra__label, .obra__number, .obra__board-head, .obra__board-foot {
  font-family: var(--mono); font-size: 11px; font-weight: 400;
  line-height: 1.5; letter-spacing: .08em; text-transform: uppercase;
}
.obra__label { color: var(--ash); margin-bottom: 20px; }
.obra__heading { font-size: clamp(36px, 4.6vw, 66px); max-width: 15ch; line-height: 1.04; font-weight: 400; }
.obra__layout { display: grid; grid-template-columns: minmax(0, .83fr) minmax(0, 1.17fr); column-gap: clamp(40px, 6vw, 100px); align-items: start; margin-top: 48px; }
.obra__steps { list-style: none; padding: 0; margin: 0; min-width: 0; }
.obra__step { position: relative; padding: 32px 0 56px; min-height: 56svh; border-top: 1px solid var(--linha); color: var(--white); }
.obra__step::before { content: ''; position: absolute; top: -1px; left: 0; height: 1px; width: 48px; background: var(--eng-acento, var(--saffron)); opacity: 0; }
.obra--mounted .obra__step { color: var(--ash); }
.obra--mounted .obra__step--active { color: var(--white); }
.obra__step--active::before { opacity: 1; }
.obra--running .obra__step::before { transition: opacity .6s var(--ease); }
.obra__number { display: block; margin-bottom: 26px; color: var(--ash); }
.obra__step h3 { font-size: clamp(27px, 2.7vw, 38px); font-weight: 400; line-height: 1.1; max-width: 16ch; }
.obra__step p { max-width: 37ch; margin-top: 18px; font-size: 18px; font-weight: 300; line-height: 1.65; }
.obra--mounted .obra__step[data-obra-step="4"] { min-height: 100svh; }
.obra__delivery-copy { position: sticky; top: calc(var(--obra-top) + 20svh); }
.obra__board {
  position: sticky; top: var(--obra-top); min-width: 0; grid-column: 2; grid-row: 1;
  margin: 0; border-block: 1px solid var(--linha);
}
.obra__board-head, .obra__board-foot { display: flex; justify-content: space-between; gap: 16px; color: var(--ash); padding: 16px 0; }
.obra__board-head span:last-child { color: var(--eng-acento, var(--saffron)); }
.obra__sheet { position: relative; isolation: isolate; overflow: hidden;
  width: min(100%, calc((100svh - var(--bar-h, 72px) - 150px) / .7)); margin-inline: auto; }
.obra__grid {
  position: absolute; inset: 0; opacity: var(--obra-grid, 0);
  background-image:
    linear-gradient(to right, color-mix(in srgb, var(--white) 7%, transparent) 1px, transparent 1px),
    linear-gradient(to bottom, color-mix(in srgb, var(--white) 7%, transparent) 1px, transparent 1px),
    linear-gradient(to right, color-mix(in srgb, var(--white) 3%, transparent) 1px, transparent 1px),
    linear-gradient(to bottom, color-mix(in srgb, var(--white) 3%, transparent) 1px, transparent 1px);
  background-size: 100px 100px, 100px 100px, 20px 20px, 20px 20px;
}
.obra__scene {
  position: relative; width: 100%; aspect-ratio: 10 / 7;
  transform: scale(var(--obra-scale, 1)); transform-origin: 50% 65%;
}
.obra__photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain;
  clip-path: inset(var(--obra-clip, 0%) 0 0); }
.obra__svg { position: relative; display: block; width: 100%; height: 100%; }
.obra__ink { opacity: var(--obra-ink, .12); }
.obra__construction { opacity: var(--obra-grid, 0); }
.obra__dimensions { opacity: var(--obra-dimensions, 0); }
.obra__svg :is(path, rect, circle, line, polyline) { fill: none; stroke: var(--obra-line); stroke-width: 1; vector-effect: non-scaling-stroke; stroke-linejoin: miter; }
.obra__svg .obra__guide { stroke: var(--obra-guide); }
.obra__svg .obra__dimension { stroke: var(--eng-acento, var(--saffron)); }
.obra__svg .obra__hatch { stroke: color-mix(in srgb, var(--white) 24%, transparent); }
.obra__svg text { fill: var(--ash); font-family: var(--mono); font-size: 11.5px; font-weight: 400; letter-spacing: .08em; }
.obra__svg .obra__measure { fill: var(--eng-acento, var(--saffron)); }
.obra__svg [data-obra-draw] { stroke-dasharray: none; stroke-dashoffset: var(--obra-offset, 0); }
.obra--mounted [data-obra-draw] { stroke-dasharray: var(--obra-length, 1); }
.obra__svg [data-obra-note] { opacity: var(--obra-alpha, 1); }
.obra__board-foot { border-top: 1px solid var(--linha); font-size: 10px; }
.obra__caption { display: grid; }
.obra__caption-plan, .obra__caption-real { grid-area: 1 / 1; }
.obra__caption-plan { opacity: calc(1 - var(--obra-caption, 1)); }
.obra__caption-real { opacity: var(--obra-caption, 1); }
/* A foto noturna permanece fotográfica no claro; as linhas usam o token de texto do tema. */
.obra--image-error .obra__photo { visibility: hidden; }
@media (max-width: 899px) {
  .obra__layout { display: flex; flex-direction: column; gap: 0; margin-top: 36px; }
  /* celular: a prancha fica fixa no alto e os passos passam por baixo; fundo translúcido como o da barra */
  .obra__board { order: -1; width: 100%; top: var(--bar-h, 72px); z-index: var(--z-content);
    background: color-mix(in srgb, var(--void) 90%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
  .obra__board-head { padding: 10px 0; }
  .obra__board-foot { padding: 8px 0; }
  .obra__sheet { width: min(100%, 41.42857svh); margin-inline: auto; }
  .obra__grid { background-size: 80px 80px, 80px 80px, 16px 16px, 16px 16px; }
  .obra__steps { width: 100%; padding-top: 24px; }
  .obra__step { min-height: 52svh; padding-top: 24px; padding-bottom: 48px; }
  .obra__number { margin-bottom: 18px; }
  .obra__step p { font-size: 17px; max-width: 42ch; }
  .obra__delivery-copy { top: calc(var(--bar-h, 72px) + 29svh + 108px); }
  .obra__board-foot { font-size: 9px; gap: 8px; letter-spacing: .025em; }
  .obra__svg text { font-size: 18px; letter-spacing: .04em; }
  .obra__svg .obra__measure { font-size: 14px; letter-spacing: 0; }
}
@media (max-height: 550px) and (max-width: 899px) {
  .obra__layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; }
  .obra__steps { grid-column: 1; grid-row: 1; padding-top: 0; }
  .obra__board { grid-column: 2; grid-row: 1; }
  .obra__sheet { width: min(100%, 70svh); }
  .obra__board-head { padding: 4px 0; }
  .obra__board-foot { padding: 4px 0; }
  .obra__board-head, .obra__board-foot { font-size: 8px; letter-spacing: 0; gap: 6px; }
  .obra__delivery-copy { top: calc(var(--bar-h, 72px) + 24px); }
  .obra__step p { font-size: 16px; line-height: 1.5; margin-top: 12px; }
  .obra__number { margin-bottom: 12px; }
}
html.motion-off .obra { --obra-clip: 0% !important; --obra-scale: 1 !important; --obra-grid: 0 !important;
  --obra-ink: .12 !important; --obra-dimensions: 0 !important; --obra-caption: 1 !important; }
html.motion-off .obra [data-obra-draw] { stroke-dashoffset: 0 !important; stroke-dasharray: none !important; }
html.motion-off .obra [data-obra-note] { opacity: 1 !important; }
html.motion-off .obra .obra__step { color: var(--white); }
html.motion-off .obra .obra__step::before { opacity: 0; }
@media (prefers-reduced-motion: reduce) {
  .obra { --obra-clip: 0% !important; --obra-scale: 1 !important; --obra-grid: 0 !important;
    --obra-ink: .12 !important; --obra-dimensions: 0 !important; --obra-caption: 1 !important; }
  .obra *, .obra *::before { transition: none !important; }
  .obra [data-obra-draw] { stroke-dashoffset: 0 !important; stroke-dasharray: none !important; }
  .obra [data-obra-note] { opacity: 1 !important; }
  .obra .obra__step { color: var(--white); }
  .obra .obra__step::before { opacity: 0; }
}
/* Também prevalece sobre pausa/redução: não anunciar foto pronta se o arquivo falhou. */
html .obra.obra--image-error { --obra-grid: 1 !important; --obra-ink: 1 !important;
  --obra-dimensions: 1 !important; --obra-caption: 0 !important; }