/* PENSARE · o computador do site, com o PENSARE OS a correr lá dentro (o mesmo visual do OS de hoje: barra em Tinta,
   PENSARE Display nos títulos e nos números, indicadores numa só folha, a lâmina e o vidro), e as peças do OS. */

.pc { --abre: 1; --rx: 0deg; --ry: 0deg; position: relative; width: min(100%, 1120px, calc((100vh - 120px) * 1.68)); margin: clamp(28px, 4vw, 56px) auto 0; perspective: 2400px; }
.pc-corpo { position: relative; transform-style: preserve-3d; transform: rotateX(var(--rx)) rotateY(var(--ry)); transition: transform .5s var(--curva); }
.pc-tampa { position: relative; padding: clamp(7px, 1vw, 13px) clamp(7px, 1vw, 13px) clamp(10px, 1.4vw, 18px); background: linear-gradient(170deg, #22344a, #0E1C2B 45%, #0A1521); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), inset 0 0 0 1px rgba(255, 255, 255, .05), 0 40px 90px -36px rgba(14, 28, 43, .65);
  transform-origin: 50% 100%; transform: rotateX(calc((1 - var(--abre)) * -74deg)); will-change: transform; }
.pc-ecra { position: relative; width: 100%; overflow: hidden; background: var(--papel); }
.pc-ecra::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 40; background: linear-gradient(115deg, rgba(255, 255, 255, .13), transparent 32%, transparent 72%, rgba(255, 255, 255, .05)); }
.pc-base { position: relative; height: clamp(10px, 1.5vw, 20px); margin-inline: -3.2%; background: linear-gradient(180deg, #33465C, #15243A 55%, #0A1521); clip-path: polygon(1.6% 0, 98.4% 0, 100% 100%, 0 100%); }
.pc-base::before { content: ""; position: absolute; left: 50%; top: 0; width: 14%; height: 34%; transform: translateX(-50%); background: rgba(0, 0, 0, .35); }
.pc-sombra { position: absolute; left: 3%; right: 3%; bottom: -20px; height: 32px; background: radial-gradient(closest-side, rgba(14, 28, 43, .34), transparent); filter: blur(4px); opacity: calc(.25 + var(--abre) * .75); pointer-events: none; }
.pc-pe { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; align-items: center; margin-top: 30px; }
.pc-nota { font-family: var(--letra-dados); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--tinta-2); }
.pc-pausa { font-family: var(--letra-dados); font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--azul); padding: 6px 10px; border: 1px solid var(--filete-2); transition: background-color .2s; }
.pc-pausa:hover { background: var(--nevoa); }

/* ---------- o OS ---------- */
.os { position: absolute; left: 0; top: 0; transform-origin: 0 0; display: grid; grid-template-columns: 208px minmax(0, 1fr); background: var(--papel); color: var(--tinta); font-size: 14px; line-height: 1.4; text-align: left; user-select: none; overflow: hidden; }
.compacto .os { grid-template-columns: minmax(0, 1fr); }
.os-nav { background: var(--tinta); color: #AEB9C7; padding: 15px 10px; display: flex; flex-direction: column; }
.compacto .os-nav { display: none; }
.os-marca { display: flex; align-items: center; gap: 8px; padding: 2px 6px 16px; }
.os-marca img { width: 104px; height: 25px; object-fit: contain; object-position: left center; }
.os-marca span { font-family: var(--letra-dados); font-size: 10px; letter-spacing: .1em; padding-left: 8px; border-left: 1px solid rgba(255, 255, 255, .2); color: #8E9BAE; }
.os-seccao { font-family: var(--letra-dados); font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase; color: #8E9BAE; padding: 14px 8px 6px; }
.os-nav-lista { display: grid; gap: 1px; margin: 0; }
.os-i { display: flex; align-items: center; gap: 10px; padding: 8px 8px; font-size: 13px; font-weight: 500; border-left: 2px solid transparent; transition: background-color .35s, color .35s, border-color .35s; }
.os-i svg { width: 16px; height: 16px; flex: none; opacity: .85; }
.os-i.on { background: rgba(47, 104, 161, .36); color: #fff; border-left-color: #9CC0E6; }
.os-trabalho { position: relative; display: flex; flex-direction: column; min-width: 0; background: var(--papel) radial-gradient(900px 400px at 78% -160px, rgba(47, 104, 161, .13), transparent 70%); }
.os-topo { flex: none; height: 50px; display: flex; align-items: center; gap: 10px; padding: 0 18px; background: rgba(255, 255, 255, .74); border-bottom: 1px solid rgba(14, 28, 43, .08); }
.os-busca { flex: 1; max-width: 300px; font-size: 12px; color: var(--tinta-2); padding: 6px 10px; border: 1px solid var(--filete-2); background: #fff; }
.os-empresa { margin-left: auto; font-size: 12.5px; font-weight: 600; padding: 6px 10px; border: 1px solid var(--filete); background: #fff; }
.os-quem { width: 28px; height: 28px; display: grid; place-items: center; font-size: 10.5px; font-weight: 700; color: var(--azul); background: var(--nevoa); }
.compacto .os-busca { display: none; }
.os-pag { position: relative; flex: 1; min-height: 0; padding: 16px 20px; overflow: hidden; }
.o-cena { animation: oEntra .55s var(--curva) backwards; }
@keyframes oEntra { from { opacity: 0; transform: translateY(10px) scale(.995); } to { opacity: 1; transform: none; } }
.o-eyebrow { font-family: var(--letra-dados); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--tinta-2); display: flex; align-items: center; gap: 8px; }
.o-eyebrow::before { content: ""; width: 18px; height: 1px; background: var(--tinta-2); }
.o-h1 { font-family: var(--letra-titulos); font-weight: 400; font-size: 32px; line-height: 1.06; letter-spacing: .02em; text-transform: uppercase; margin: 6px 0 2px; color: var(--tinta); }
.o-sub { font-size: 13.5px; color: var(--tinta-2); margin-bottom: 12px; }
.o-grelha { display: grid; gap: 12px; margin-top: 12px; align-items: start; }
.o-2-1 { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); }
.o-1-1 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.o-1-2 { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
.compacto .o-2-1, .compacto .o-1-1, .compacto .o-1-2 { grid-template-columns: minmax(0, 1fr); }
.compacto .o-so-grande { display: none; }
.o-cartao { background: #fff; border: 1px solid rgba(14, 28, 43, .08); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .95), 0 1px 2px rgba(14, 28, 43, .05), 0 12px 32px -16px rgba(14, 28, 43, .22); padding: 14px 16px; }
.o-tit { font-weight: 600; font-size: 14px; margin-bottom: 8px; display: flex; justify-content: space-between; gap: 10px; }
.o-tit small { font-weight: 400; font-size: 12px; color: var(--tinta-2); }
.o-kpis { display: flex; background: #fff; border: 1px solid rgba(14, 28, 43, .08); box-shadow: 0 12px 32px -16px rgba(14, 28, 43, .22); margin-bottom: 12px; }
.o-kpi { flex: 1; padding: 11px 14px; border-left: 1px solid var(--filete); min-width: 0; }
.o-kpi:first-child { border-left: 0; }
.o-kpi span { font-size: 12px; font-weight: 500; color: var(--tinta-2); display: block; }
.o-kpi b { display: block; font-family: var(--letra-titulos); font-weight: 400; font-size: 29px; line-height: 1.12; color: var(--azul); }
.o-kpi b span { font: inherit; color: inherit; display: inline; }
.o-kpi.bom b { color: #08794F; }
.o-kpi small { font-size: 11.5px; color: var(--tinta-2); }
.o-lamina { position: relative; min-height: 158px; padding: 16px 18px; color: #fff; display: flex; flex-direction: column; justify-content: flex-end; background: repeating-linear-gradient(135deg, rgba(255, 255, 255, .1) 0 1px, transparent 1px 9px), linear-gradient(160deg, #2F68A1, #22507A); box-shadow: 0 14px 30px -12px rgba(40, 90, 142, .7); }
.o-lamina span { font-weight: 600; font-size: 13.5px; }
.o-lamina b { font-family: var(--letra-titulos); font-weight: 400; font-size: 58px; line-height: 1.05; white-space: nowrap; }
.o-lamina u { align-self: flex-start; margin-top: 8px; text-decoration: none; font-size: 12px; font-weight: 600; padding: 6px 10px; border: 1px solid rgba(255, 255, 255, .55); }
.o-lista li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0 10px; padding: 8px 8px; border-top: 1px solid var(--filete); align-items: center; }
.o-lista li:first-child { border-top: 0; }
.o-lista b { font-weight: 600; font-size: 13.5px; }
.o-lista span:not(.o-est) { font-size: 12.5px; color: var(--tinta-2); grid-column: 1; }
.o-lista .o-est { grid-column: 2; grid-row: 1 / span 2; }
.o-novo { background: var(--nevoa); box-shadow: inset 2px 0 0 var(--azul); animation: oEntra .5s var(--curva) both; }
.o-est { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; white-space: nowrap; }
.o-est em { font-style: normal; }
.o-est i { width: 7px; height: 7px; background: currentColor; flex: none; }
.o-est.ok { color: #08794F; } .o-est.warn { color: #A5510A; } .o-est.bad { color: #C42B1F; } .o-est.info { color: var(--azul); } .o-est.neutro { color: var(--tinta-2); }
.o-est.muda { animation: oMuda .6s var(--curva); }
@keyframes oMuda { 0% { transform: scale(1); } 40% { transform: scale(1.14); } 100% { transform: scale(1); } }
.o-tab { width: 100%; border-collapse: collapse; font-size: 13px; }
.o-tab th { font-family: var(--letra-dados); font-size: 10px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--tinta-2); text-align: left; padding: 3px 8px 7px; }
.o-tab td { padding: 9px 8px; border-top: 1px solid var(--filete); white-space: nowrap; }
.o-tab td:first-child { font-weight: 600; }
.compacto .o-tab th:nth-child(2), .compacto .o-tab td:nth-child(2) { display: none; }
.o-realce { box-shadow: inset 2px 0 0 var(--azul); background: rgba(230, 238, 247, .55); }
.pulso { animation: oPulso .9s var(--curva); }
@keyframes oPulso { 0% { background-color: rgba(40, 90, 142, .28); } 100% { background-color: rgba(230, 238, 247, .55); } }
.o-apaga { opacity: 0; transform: translateY(6px); transition: opacity .4s, transform .5s var(--curva); }
.o-apaga.on { opacity: 1; transform: none; }
.o-campos > div { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; border-top: 1px solid var(--filete); font-size: 13.5px; }
.o-campos > div:first-child { border-top: 0; }
.o-campos dt { color: var(--tinta-2); }
.o-campos dd { margin: 0; font-weight: 600; }
.o-mau { color: #C42B1F; }
.o-preco { display: flex; gap: 8px; margin: 10px 0 12px; padding: 10px 0 0; border-top: 1px solid var(--tinta); }
.o-preco > div { flex: 1; min-width: 0; }
.o-preco span { font-size: 11.5px; color: var(--tinta-2); display: block; }
.o-preco b { font-family: var(--letra-titulos); font-weight: 400; font-size: 24px; line-height: 1.2; white-space: nowrap; }
.o-total b { color: var(--azul); font-size: 30px; }
.o-bt { display: inline-block; font: 600 13px var(--letra-texto); color: #fff; padding: 9px 14px; background: var(--azul) var(--degrade-lamina); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 8px 20px -10px rgba(40, 90, 142, .7); transition: transform .15s, filter .2s; }
.o-bt.premido { transform: scale(.96); filter: brightness(.9); }
.o-porta { width: 100%; height: 232px; }
.o-traca { stroke-dasharray: 1; stroke-dashoffset: 1; animation: oTraca 1s cubic-bezier(.45, 0, .2, 1) forwards; }
.o-cota { stroke: #AEB9C7; stroke-width: 1; }
.o-cota-t { opacity: 0; animation: oAcende .4s 1.7s forwards; }
@keyframes oTraca { to { stroke-dashoffset: 0; } }
@keyframes oAcende { to { opacity: 1; } }
.o-caminho { display: flex; gap: 2px; margin-top: 12px; font-family: var(--letra-dados); font-size: 11px; letter-spacing: .04em; }
.o-caminho li { flex: 1; padding-top: 7px; border-top: 2px solid var(--filete-2); color: var(--tinta-2); transition: color .4s, border-color .4s; }
.o-caminho li.on { border-color: var(--azul); color: var(--azul); }
.compacto .o-caminho { font-size: 0; }
.o-muda { background: rgba(255, 255, 255, .86); }
.o-muda-t { font-size: 13.5px; margin-bottom: 10px; }
.o-peq { font-size: 12.5px; color: var(--tinta-2); margin-top: 8px; }
.o-postos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.o-posto { background: #fff; border: 1px solid rgba(14, 28, 43, .08); box-shadow: 0 12px 32px -16px rgba(14, 28, 43, .22); padding: 11px 14px; }
.o-posto-c { display: flex; justify-content: space-between; align-items: baseline; }
.o-posto small { font-size: 11.5px; color: var(--tinta-2); }
.o-num { font-family: var(--letra-titulos); font-size: 24px; color: var(--tinta-2); }
.o-num em { font-style: normal; color: var(--tinta); }
.o-bolas { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 7px; }
.o-bolas i { width: 13px; height: 13px; border: 1px solid var(--filete-2); transition: background-color .2s, border-color .2s; }
.o-bolas i.on { background: var(--azul); border-color: var(--azul); }
.o-rota { position: relative; display: flex; justify-content: space-between; padding-top: 30px; margin-top: 4px; }
.o-rota::before, .o-rota-fio { content: ""; position: absolute; left: 6px; right: 6px; top: 11px; height: 2px; background: var(--filete-2); }
.o-rota-fio { background: var(--azul); transform: scaleX(0); transform-origin: left; transition: transform 2.2s cubic-bezier(.45, 0, .2, 1); }
.o-rota-fio.anda { transform: scaleX(1); }
.o-rota-p { position: relative; font-size: 12.5px; font-weight: 600; color: var(--tinta-2); transition: color .3s; }
.o-rota-p::before { content: ""; position: absolute; left: 0; top: -25px; width: 13px; height: 13px; background: #fff; border: 1px solid var(--filete-2); transition: background-color .3s, border-color .3s; }
.o-rota-p:nth-of-type(2)::before { left: 50%; margin-left: -7px; }
.o-rota-p:last-child::before { left: auto; right: 0; }
.o-rota-p.on { color: var(--tinta); }
.o-rota-p.on::before { background: var(--azul); border-color: var(--azul); }
.o-prova { font-size: 13.5px; }
.o-ponte-l { display: grid; grid-template-columns: 150px minmax(0, 1fr) 70px; gap: 12px; align-items: center; padding: 5px 0; border-top: 1px solid var(--filete); }
.o-ponte-l:first-child { border-top: 0; }
.compacto .o-ponte-l { grid-template-columns: 124px minmax(0, 1fr) 60px; gap: 8px; }
.o-ponte-n { font-size: 13px; font-weight: 600; line-height: 1.2; }
.o-ponte-n small { display: block; font-weight: 400; font-size: 11px; color: var(--tinta-2); }
.compacto .o-ponte-n small { display: none; }
.o-ponte-b { height: 16px; background: var(--papel); overflow: hidden; }
.o-ponte-b i { display: block; height: 100%; width: 0; background: var(--tinta); transition: width .55s var(--curva); }
.o-ponte-l.on .o-ponte-b i { width: var(--w); }
.o-ponte-b i.mau { background: #C42B1F; } .o-ponte-b i.bom { background: #08794F; } .o-ponte-b i.fim { background: var(--azul) var(--degrade-lamina); }
.o-ponte-l > b { font-family: var(--letra-titulos); font-weight: 400; font-size: 17px; text-align: right; white-space: nowrap; }
.o-ponte-l > b.mau { color: #C42B1F; } .o-ponte-l > b.bom { color: #08794F; } .o-ponte-l > b.fim { color: var(--azul); }
.o-aviso { position: absolute; right: 18px; bottom: 16px; z-index: 12; max-width: 74%; padding: 10px 14px; font-size: 13px; font-weight: 500; background: rgba(255, 255, 255, .92); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: 0 2px 8px rgba(14, 28, 43, .08), 0 22px 50px -18px rgba(14, 28, 43, .4); border-left: 3px solid var(--azul); animation: oAviso .55s var(--curva) both; }
@keyframes oAviso { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
/* o fecho: uma faixa na lâmina, por baixo da ponte da margem, que continua à vista */
.o-fim { position: absolute; left: 20px; right: 20px; bottom: 16px; z-index: 20; display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: 0 .4em; padding: 14px 18px; text-align: center; background: var(--azul) var(--degrade-lamina); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 14px 30px -12px rgba(40, 90, 142, .7); color: #fff; font-family: var(--letra-titulos); font-size: 30px; line-height: 1.08; letter-spacing: .02em; text-transform: uppercase; opacity: 0; transform: translateY(12px); pointer-events: none; transition: opacity .6s, transform .7s var(--curva); }
.o-fim.on { opacity: 1; transform: none; }
.o-fim p:last-child { color: #D5E0EC; }
/* nos moldes estreitos a ponte ocupa o ecrã até ao fundo: a faixa fica no lugar do título, que se apaga, e não tapa nada */
.compacto .o-fim { left: 16px; right: 16px; top: 16px; bottom: auto; padding: 12px 14px; font-size: 26px; }
.mini .o-fim { left: 14px; right: 14px; padding: 10px 12px; font-size: 23px; }
.compacto .o-cena > .o-eyebrow, .compacto .o-cena > .o-h1, .compacto .o-cena > .o-sub { transition: opacity .4s; }
.compacto .o-cena.fecho > .o-eyebrow, .compacto .o-cena.fecho > .o-h1, .compacto .o-cena.fecho > .o-sub { opacity: 0; }
/* o molde do telemóvel: a letra miúda sobe um pouco, e os números dos indicadores ficam numa linha */
.mini .o-eyebrow { font-size: 11.5px; }
.mini .o-tab th { font-size: 11px; }
.mini .o-kpi > span, .mini .o-est { font-size: 12.5px; }
.mini .o-kpi small, .mini .o-preco span, .mini .o-posto small { font-size: 12px; }
.mini .o-peq { font-size: 13px; }
.mini .o-kpi { padding: 10px 10px; }
.mini .o-kpi b { font-size: 23px; white-space: nowrap; }
.os-cursor { position: absolute; left: 0; top: 0; width: 22px; height: 22px; z-index: 30; pointer-events: none; opacity: 0; transition: transform .95s cubic-bezier(.45, 0, .15, 1), opacity .3s; filter: drop-shadow(0 2px 3px rgba(14, 28, 43, .4)); }
.os-cursor.on { opacity: 1; }
.os-cursor::after { content: ""; position: absolute; left: -11px; top: -11px; width: 28px; height: 28px; border: 2px solid var(--azul); opacity: 0; }
.os-cursor.clic::after { animation: oClique .55s var(--curva); }
@keyframes oClique { 0% { opacity: .9; transform: scale(.3); } 100% { opacity: 0; transform: scale(1.5); } }

/* o que acontece por baixo do computador */
.pc-agora { max-width: 60ch; }
.pc-agora b { display: block; font-family: var(--letra-titulos); font-weight: 400; font-size: clamp(24px, 2vw, 30px); text-transform: uppercase; letter-spacing: .02em; line-height: 1.1; }
.pc-agora span { font-size: 15.5px; color: var(--tinta-2); }

/* ---------- começa por uma peça, ou por tudo ---------- */
.pecas { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 24px clamp(24px, 5vw, 88px); align-items: center; margin-top: clamp(48px, 7vw, 110px); }
.pecas-agora { margin: 18px 0; min-height: 5.2em; }
.pecas-agora b { display: block; font-weight: 600; font-size: 18px; color: var(--azul); }
.pecas-agora span { display: block; font-size: 16px; color: var(--tinta-2); max-width: 38ch; }
.pecas-grelha { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(6px, 1vw, 12px); }
.pecas-linhas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.pecas-linhas polyline { fill: none; stroke: var(--azul); stroke-width: 1.5; stroke-dasharray: 3000; stroke-dashoffset: 3000; opacity: 0; }
.pecas.tudo .pecas-linhas polyline { opacity: .9; animation: pecasLiga 2.2s cubic-bezier(.45, 0, .2, 1) forwards; }
@keyframes pecasLiga { to { stroke-dashoffset: 0; } }
.peca { position: relative; z-index: 1; min-height: 76px; padding: 10px; text-align: left; background: rgba(255, 255, 255, .82); border: 1px solid var(--filete-2); font-size: 13.5px; font-weight: 600; line-height: 1.2; color: var(--tinta); transition: background-color .3s, color .3s, border-color .3s, transform .4s var(--curva), box-shadow .3s; }
.peca small { display: block; font-family: var(--letra-dados); font-weight: 400; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--tinta-2); margin-bottom: 5px; transition: color .3s; }
@media (hover: hover) { .peca:hover { transform: translateY(-2px); border-color: var(--azul); } }
.peca.on { border-color: var(--azul); color: #fff; box-shadow: 0 10px 24px -12px rgba(40, 90, 142, .7); }
.peca.on small { color: #D5E0EC; }
.pecas.tudo .peca { transition-delay: calc(var(--i) * 90ms); }
@media (max-width: 859px) { .pecas { grid-template-columns: 1fr; } .pecas-grelha { grid-template-columns: repeat(3, minmax(0, 1fr)); } .peca { min-height: 66px; font-size: 12.5px; padding: 8px; } }

/* ---------- os casos, sem números: o antes e o depois ---------- */
.ficha-par { display: flex; flex-wrap: wrap; align-items: center; gap: .24em .34em; font-family: var(--letra-titulos); font-size: clamp(34px, 5.2vw, 96px); line-height: 1.02; letter-spacing: .01em; text-transform: uppercase; padding-block: clamp(16px, 2.2vw, 32px) clamp(12px, 1.6vw, 24px); }
.ficha-par .de { color: var(--tinta-2); }
.ficha-par .para { color: var(--azul); display: inline-block; }
/* a seta fica sempre agarrada ao destino: nunca pendurada no fim da linha */
.ficha-ir { display: inline-flex; align-items: center; gap: .34em; white-space: nowrap; }
html.js .ficha-par.rv { opacity: 1; transform: none; }
html.js .ficha-par.rv .para { clip-path: inset(-.1em 100% -.1em 0); transition: clip-path .95s var(--curva) .55s; }
html.js .ficha-par.rv.in .para { clip-path: inset(-.1em -.1em -.1em 0); }
.ficha-mudou { display: grid; gap: 0; border-top: 1px solid var(--filete-2); margin-bottom: clamp(12px, 1.6vw, 24px); }
.ficha-mudou li { display: grid; grid-template-columns: minmax(0, 1fr) 30px minmax(0, 1fr); gap: 8px 12px; padding: 10px 0; border-bottom: 1px solid var(--filete); align-items: baseline; }
.ficha-mudou .de { color: var(--tinta-2); text-decoration: line-through; text-decoration-color: rgba(68, 83, 106, .4); }
.ficha-mudou .seta-l { width: 22px; height: 10px; color: var(--azul); align-self: center; }
.ficha-mudou .para { font-weight: 600; }
@media (max-width: 599px) { .ficha-mudou li { grid-template-columns: 1fr; gap: 2px; } .ficha-mudou .seta-l { display: none; } }

/* ---------- mais margem, mais tempo ---------- */
.entrada-mais { display: flex; gap: .3em; margin-top: clamp(12px, 1.6vw, 22px); color: var(--azul); height: 1.15em; overflow: hidden; }
.entrada-mais .roda { display: inline-block; }
.entrada-mais .roda.sai { animation: rodaSai .32s cubic-bezier(.5, 0, .9, .4) forwards; }
.entrada-mais .roda.entra { animation: rodaEntra .5s var(--curva); }
@keyframes rodaSai { to { transform: translateY(-110%); opacity: 0; } }
@keyframes rodaEntra { from { transform: translateY(110%); opacity: 0; } to { transform: none; opacity: 1; } }

/* no telemóvel: o fio fica numa linha só, e o nome de cada passo aparece na legenda */
.compacto .o-lamina { min-height: 104px; padding: 12px 14px; }
.compacto .o-lamina b { font-size: 44px; }
@media (max-width: 859px) {
  .fio-corpo { grid-template-columns: 1fr 1fr; gap: 10px 12px; }
  .fio-linha { grid-column: 1 / -1; grid-row: 2; grid-template-columns: repeat(8, minmax(0, 1fr)); margin-top: 4px; }
  .fio-linha::before { left: 0; right: 0; top: 16px; bottom: auto; width: auto; height: 1px; }
  .fio-linha::after { left: 0; right: 0; top: 15.5px; bottom: auto; width: auto; height: 2px; transform: scaleX(var(--p)); transform-origin: left; }
  .fio-no { display: block; padding: 6px 0; }
  .fio-no i { margin: 0 auto; }
  .fio-no span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .fio-ponta b { font-size: 24px; }
  .fio-ponta-fim { text-align: right; }
  .fio-legenda { position: static; margin-top: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  .o-cena, .o-novo, .o-aviso { animation: none; }
  .o-traca { animation: none; stroke-dashoffset: 0; } .o-cota-t { animation: none; opacity: 1; }
  .pc-tampa { transform: none; }
  .nucleo-col .modulo::after { animation: none; }
  html.js .ficha-par.rv .para { clip-path: none; transition: none; }
  .o-fim { transition: none; transform: none; }
  .peca.on svg path { animation: none; }
  .pecas.juntas .pecas-grelha::after { animation: none; display: none; }
  .porta-camada, .porta-mapa, .peca, .peca::before { transition: none !important; }
}

html:not(.js) .pc { display: none; }
html:not(.js) .pc-bloco { display: block; }
/* sem JavaScript não há computador: o fio ocupa a largura toda, com os oito passos numa linha, de uma ponta à outra */
@media (min-width: 1000px) {
  html:not(.js) .pc-bloco .fio-linha { grid-template-columns: repeat(8, minmax(0, 1fr)); margin: 18px 0; }
  html:not(.js) .pc-bloco .fio-linha::before { left: 0; right: 0; top: 12px; bottom: auto; width: auto; height: 1px; }
  html:not(.js) .pc-bloco .fio-linha::after { display: none; }
  html:not(.js) .pc-bloco .fio-no { display: block; text-align: center; padding: 0 4px 8px; }
  html:not(.js) .pc-bloco .fio-no i { margin: 0 auto 10px; }
  html:not(.js) .pc-bloco .fio-ponta-fim { text-align: right; }
}

/* ============ a cena de Como trabalhamos (js-3d/empresa.js): o canvas e as etiquetas.
   A cena «Uma compra», da página inicial e do PENSARE OS, tem os estilos todos em compra.css ============ */
.em-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.em-rotulos { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.em-rot { position: absolute; left: 0; top: 0; font-family: var(--letra-dados); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--tinta); padding: 3px 7px; background: rgba(255, 255, 255, .82); border: 1px solid rgba(14, 28, 43, .1); white-space: nowrap; transition: background-color .25s, color .25s; will-change: transform; }
.em-rot.on { background: var(--azul); color: #fff; border-color: var(--azul); }
.os-ponte { margin-top: clamp(32px, 5vw, 72px); color: var(--azul); }

/* ============ o fio passa para o lado do computador ============ */
.pc-bloco { display: grid; grid-template-columns: minmax(200px, 250px) minmax(0, 1fr); gap: clamp(20px, 3vw, 44px); align-items: start; margin-top: clamp(20px, 3vw, 36px); }
.pc-bloco .pc { margin: 0; width: 100%; max-width: calc((100vh - 120px) * 1.68); justify-self: center; }
.pc-bloco .fio { margin: 0; position: sticky; top: calc(var(--hdr) + 16px); --p: 0; }
.fio-ponta { margin: 0; }
.fio-ponta .etq { display: block; }
.fio-ponta b { display: block; font-family: var(--letra-titulos); font-weight: 400; font-size: 24px; line-height: 1.08; text-transform: uppercase; letter-spacing: .02em; margin-top: 2px; }
.pc-bloco .fio-ponta-fim { text-align: left; }
.pc-bloco .fio-ponta-fim b { color: var(--azul); }
.pc-bloco .fio-linha { display: grid; grid-template-columns: 1fr; margin: 12px 0; position: relative; }
.pc-bloco .fio-linha::before { left: 12px; right: auto; top: 12px; bottom: 12px; width: 1px; height: auto; }
.pc-bloco .fio-linha::after { left: 11.5px; right: auto; top: 12px; bottom: 12px; width: 2px; height: auto; transform: scaleY(var(--p)); transform-origin: top; transition: transform .6s var(--curva); }
.pc-bloco .fio-no { display: grid; grid-template-columns: 25px 1fr; gap: 12px; align-items: center; text-align: left; padding: 7px 8px 7px 0; min-height: 42px; transition: color .2s, background-color .25s; }
.pc-bloco .fio-no i { width: 25px; height: 25px; margin: 0; }
.pc-bloco .fio-no span { font-family: var(--letra-texto); font-size: 15.5px; font-weight: 500; letter-spacing: 0; }
@media (hover: hover) { .pc-bloco .fio-no:hover { background: rgba(230, 238, 247, .7); } }
.pc-bloco .fio-no.ver { background: var(--nevoa); color: var(--azul); box-shadow: inset -3px 0 0 var(--azul); }
.pc-bloco .fio-no.ver span { font-weight: 600; }
.pc-bloco .fio-legenda { display: block; margin-top: 14px; padding: 12px 0 0; min-height: 7.4em; border-top: 1px solid var(--filete-2); font-size: 14.5px; line-height: 1.4; }
.pc-bloco .fio-legenda b { display: block; font-weight: 600; margin-bottom: 2px; }
.pc-bloco .fio-legenda span { color: var(--tinta-2); }
@media (max-width: 999px) {
  .pc-bloco { grid-template-columns: minmax(0, 1fr); }
  .pc-bloco .fio { order: 2; position: static; }
  .pc-bloco .pc { order: 1; max-width: none; }
  .pc-bloco .fio-ponta { display: none; }
  .pc-bloco .fio-linha { display: flex; gap: 6px; overflow-x: auto; margin: 0 calc(var(--g) * -1); padding: 4px var(--g); scrollbar-width: none; grid-template-columns: none; }
  .pc-bloco .fio-linha::-webkit-scrollbar { display: none; }
  .pc-bloco .fio-linha::before, .pc-bloco .fio-linha::after { display: none; }
  .pc-bloco .fio-linha li { flex: none; }
  .pc-bloco .fio-no { display: block; width: auto; min-height: 44px; padding: 10px 14px; border: 1px solid var(--filete-2); background: rgba(255, 255, 255, .8); }
  .pc-bloco .fio-no i { display: none; }
  .pc-bloco .fio-no span { position: static; width: auto; height: auto; overflow: visible; clip-path: none; font-size: 14px; white-space: nowrap; }
  .pc-bloco .fio-no.on { color: var(--tinta); }
  .pc-bloco .fio-no.ver { background: var(--azul); color: #fff; box-shadow: none; border-color: var(--azul); }
  .pc-bloco .fio-legenda { min-height: 6em; border-top: 0; }
}

/* ============ o fluxo: a garra que aperta o cano, e as notas ============ */
.fluxo-garra { position: absolute; inset: 0; pointer-events: none; }
.fluxo-garra::before, .fluxo-garra::after { content: ""; position: absolute; left: 50%; width: 84px; height: 15px; margin-left: -42px; background: linear-gradient(180deg, #F4F8FC, #9CC0E6 55%, #5E86AE); box-shadow: 0 2px 8px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 255, 255, .8); opacity: 0; z-index: 4; transition: transform .45s cubic-bezier(.3, 1.8, .4, 1), opacity .15s; }
.fluxo-garra::before { top: 5px; transform: translateY(-46px); }
.fluxo-garra::after { bottom: 5px; transform: translateY(46px); }
.fechada .fluxo-garra::before, .fechada .fluxo-garra::after { opacity: 1; transform: none; }
.fluxo-acao { position: absolute; left: 50%; top: calc(var(--eixo) + 68px); transform: translateX(-50%); z-index: 4; display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; white-space: nowrap; font-family: var(--letra-dados); font-size: 12px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--noite); background: #F6C9BE; box-shadow: 0 8px 22px -8px rgba(246, 201, 190, .8); transition: background-color .25s, transform .3s var(--curva); }
.fluxo-acao em { font-style: normal; }
.fluxo-acao i { width: 9px; height: 9px; background: #C42B1F; animation: acaoPisca 1.1s infinite; }
@keyframes acaoPisca { 50% { opacity: .25; } }
.fluxo-no:hover .fluxo-acao { transform: translateX(-50%) translateY(-2px) scale(1.04); }
.fechada .fluxo-acao { background: #BFE8D3; box-shadow: 0 8px 22px -8px rgba(191, 232, 211, .7); }
.fechada .fluxo-acao i { background: #08794F; animation: none; }
.fechada .fluxo-marca { border-color: #BFE8D3; background: rgba(191, 232, 211, .12); }
.aperta .fluxo-marca { animation: aperta .6s var(--curva); }
@keyframes aperta { 0% { box-shadow: 0 0 0 0 rgba(191, 232, 211, .9); } 100% { box-shadow: 0 0 0 34px rgba(191, 232, 211, 0); } }
.treme { animation: treme .32s linear; }
@keyframes treme { 25% { transform: translate(2px, -1px); } 50% { transform: translate(-2px, 1px); } 75% { transform: translate(1px, 1px); } }
.fluxo-nota { position: absolute; display: grid; place-items: center; width: 44px; height: 24px; font-family: var(--letra-dados); font-style: normal; font-weight: 500; font-size: 13px; line-height: 1; color: #084B2F; background: linear-gradient(135deg, #EAF8F1, #A9DEC3); border: 1px solid #5BB98D; box-shadow: 0 2px 5px rgba(0, 0, 0, .35); pointer-events: none; }
.fluxo-nota-voa { left: 0; top: 0; z-index: 2; }
/* a frase da fuga tapada, junto da etapa: só no telemóvel, onde o painel de baixo fica fora do ecrã */
.fluxo-diz { display: none; }
.fluxo-pilha { position: absolute; right: 0; top: calc(var(--eixo) - 22px); bottom: 0; width: 18%; z-index: 2; pointer-events: none; overflow: hidden; }
.fluxo-dica { position: absolute; z-index: 5; left: 10.25%; top: calc(var(--eixo) - 66px); transform: translateX(-50%); padding: 5px 10px; font-family: var(--letra-dados); font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--noite); background: #fff; animation: dica 1.2s ease-in-out infinite; pointer-events: none; }
.fluxo-dica::after { content: ""; position: absolute; left: 50%; bottom: -6px; margin-left: -6px; border-left: 6px solid transparent; border-right: 6px solid transparent; border-top: 6px solid #fff; }
@keyframes dica { 50% { transform: translateX(-50%) translateY(-6px); } }
.ja-tocou .fluxo-dica { display: none; }
.fluxo-sobra { color: #fff; }
/* tablet vertical: o cano deitado, com o botão mais estreito para caber na coluna */
@media (min-width: 600px) and (max-width: 859px) {
  .fluxo-acao { top: calc(var(--eixo) + 66px); gap: 6px; padding: 6px 7px; font-size: 10px; letter-spacing: .04em; }
  .fluxo-acao i { width: 8px; height: 8px; }
}
@media (max-width: 599px) {
  .fluxo-garra::before, .fluxo-garra::after { left: auto; top: 50%; bottom: auto; width: 14px; height: 64px; margin: -32px 0 0; }
  .fluxo-garra::before { left: 3px; transform: translateX(-40px); }
  .fluxo-garra::after { right: 3px; transform: translateX(40px); }
  .fechada .fluxo-garra::before, .fechada .fluxo-garra::after { transform: none; }
  .fluxo-acao { left: calc(var(--eixo) + 40px); top: calc(50% - 10px); transform: none; padding: 6px 10px; font-size: 11px; }
  .fluxo-no:hover .fluxo-acao { transform: none; }
  .fluxo-pilha { left: 0; right: 0; width: auto; top: auto; height: 112px; }
  /* a dica fica à direita do primeiro botão, na mesma linha, com a seta virada para ele: o nome «Entram» fica à vista */
  .fluxo-dica { left: calc(var(--eixo) + 176px); top: calc((100% - 118px) / 8 - 9px); transform: none; padding: 5px 8px; font-size: 11px; animation: dicaLado 1.2s ease-in-out infinite; }
  .fluxo-dica::after { left: -6px; top: 50%; bottom: auto; margin: -6px 0 0; border-top: 6px solid transparent; border-bottom: 6px solid transparent; border-right: 6px solid #fff; border-left: 0; }
  .fluxo-nota { width: 36px; height: 20px; font-size: 11px; }
  .fluxo-diz { position: absolute; left: calc(var(--eixo) + 40px); right: 0; top: calc(50% + 28px); font-size: 13px; line-height: 1.35; color: #D5E0EC; text-align: left; }
  .fluxo-no.sel.fechada .fluxo-diz { display: block; animation: passa .5s var(--curva); }
}
@keyframes dicaLado { 50% { transform: translateX(-5px); } }
@media (prefers-reduced-motion: reduce) { .fluxo-dica, .fluxo-no.sel.fechada .fluxo-diz { animation: none; } }

/* ============ a escala: o que muda vê-se ============ */
.escala { display: block; margin-top: clamp(48px, 7vw, 110px); }
.seccao > .wrap > .escala:first-child { margin-top: 0; }
.escala-cab { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 18px; margin-bottom: clamp(18px, 2.4vw, 32px); }
/* os separadores nunca passam da coluna da esquerda, onde está a lista que eles mudam */
.escala-ctl { position: relative; display: grid; grid-template-columns: 1fr 1fr; margin: 0; border: 1px solid var(--tinta); min-width: 0; width: min(100%, 460px, calc((100% - clamp(24px, 5vw, 72px)) / 2)); }
.escala-ctl::before { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 50%; background: var(--azul) var(--degrade-lamina); transition: transform .5s var(--curva), background-color .3s; }
.escala[data-setor="publico"] .escala-ctl::before { transform: translateX(100%); background: var(--tinta-2); }
.escala-ctl button { position: relative; z-index: 1; padding: 15px 14px; font-family: var(--letra-texto); font-size: 16px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--tinta); background: none !important; transition: color .3s; }
.escala-ctl button[aria-pressed="true"] { color: #fff; }
.escala-grade { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: 24px clamp(24px, 5vw, 72px); align-items: start; }
.escala-muda > div { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 12px; align-items: baseline; padding: clamp(8px, 1vw, 13px) 0; border-bottom: 1px solid var(--filete-2); }
.escala-muda > div:first-child { border-top: 1px solid var(--tinta); }
.escala-muda dt { font-family: var(--letra-dados); font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--tinta-2); }
.escala-muda dd { margin: 0; font-family: var(--letra-titulos); text-transform: uppercase; color: var(--azul); overflow: hidden; }
.escala[data-setor="publico"] .escala-muda dd { color: var(--tinta); }
.escala-muda dd.sai { animation: muSai .24s ease-in forwards; }
.escala-muda dd.chega { animation: muChega .55s var(--curva); }
@keyframes muSai { to { transform: translateY(-60%); opacity: 0; } }
@keyframes muChega { from { transform: translateY(70%); opacity: 0; background: var(--nevoa); } to { transform: none; opacity: 1; background: transparent; } }
.escala[data-setor="publico"] .escala-n, .escala[data-setor="publico"] .escala-u { color: var(--tinta); }
.escala-leitura { margin-top: 16px; }
/* o número fica encostado à margem da coluna e a palavra sempre a 14 px dele, com 1 ou com 500+ */
.escala-n { font-size: clamp(56px, 6.4vw, 110px); min-width: 0; text-align: left; }
/* a grelha dos quadrados nunca passa da altura do ecrã */
.escala-direita { position: relative; justify-self: end; width: min(100%, calc(62svh * 1.25)); }
/* a frase do exemplo é texto corrido: IBM Plex Sans, com lugar para duas linhas, para não saltar */
.escala-ex { margin-top: 12px; min-height: 2.9em; max-width: none; font-family: var(--letra-texto); font-weight: 500; line-height: 1.45; letter-spacing: 0; text-transform: none; color: var(--tinta); }
/* as marcas da régua ficam debaixo do sítio onde o botão para (o botão tem 22 px) */
.escala-range { margin: 10px 0 0; }
.escala-marcas { position: relative; display: block; height: 1.6em; }
.escala-marcas span { position: absolute; top: 0; transform: translateX(-50%); white-space: nowrap; }
.escala-marcas span:nth-child(1) { left: 11px; }
.escala-marcas span:nth-child(2) { left: calc(11px + (100% - 22px) * .25); }
.escala-marcas span:nth-child(3) { left: calc(11px + (100% - 22px) * .5); }
.escala-marcas span:nth-child(4) { left: calc(11px + (100% - 22px) * .75); }
.escala-marcas span:nth-child(5) { left: calc(100% - 11px); }
@media (max-width: 859px) {
  .escala-grade { grid-template-columns: 1fr; }
  .escala-muda > div { grid-template-columns: 112px minmax(0, 1fr); }
  .escala-ctl { width: 100%; } .escala-ctl button { font-size: 14.5px; padding: 13px 8px; }
  /* a grelha cabe no ecrã com a régua, e a frase fica colada à régua */
  .escala-direita { display: flex; flex-direction: column; justify-self: stretch; width: auto; }
  .escala-ex { order: -1; margin: 0 0 10px; }
  .escala-tela { width: min(100%, calc(46svh * 1.25)); margin-inline: auto; }
}

/* ============ as peças: com símbolo e explicação, e juntam-se ============ */
.pecas { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.pecas-txt .btn { margin-top: 4px; }
/* a altura da ficha é a da mais comprida, medida pelo computador.js: o texto muda e nada salta */
.pecas-ficha { margin: 18px 0; scroll-margin-top: calc(var(--hdr) + 12px); }
.pecas-ficha.na-grelha { grid-column: 1 / -1; margin: 0; padding: 14px 16px 10px; background: var(--folha); border: 1px solid var(--azul); box-shadow: var(--sombra-s); }
.pecas-ficha .etq { color: var(--azul); }
.pecas-n { margin-top: 6px; }
.pecas-f { margin-top: 6px; font-size: 16.5px; color: var(--tinta-2); }
.pecas-l { margin-top: 10px; }
.pecas-l li { position: relative; padding: 6px 0 6px 16px; border-top: 1px solid var(--filete); font-size: 14.5px; line-height: 1.35; }
.pecas-l li::before { content: ""; position: absolute; left: 0; top: 13px; width: 7px; height: 7px; background: var(--azul); }
.pecas-grelha { position: relative; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; }
.peca { display: flex; flex-direction: column; justify-content: space-between; aspect-ratio: 1; min-height: 0; padding: 8px; font-size: 11.5px; font-weight: 600; line-height: 1.15; background: rgba(255, 255, 255, .9); border: 1px solid var(--filete-2); transition: background-color .35s, color .35s, border-color .35s, transform .4s var(--curva), box-shadow .3s; transition-delay: 0s; }
/* o azul da peça acesa entra e sai ao mesmo tempo que a cor do texto: nunca texto escuro no azul, nem branco no branco */
.peca::before { content: ""; position: absolute; inset: -1px; z-index: -1; pointer-events: none; background: var(--azul) var(--degrade-lamina); opacity: 0; transition: opacity .35s; }
.peca svg { width: 42%; max-width: 34px; height: auto; color: var(--azul); transition: color .35s, opacity .4s; }
.peca span { transition: opacity .4s; }
.peca svg path { stroke-dasharray: 1; stroke-dashoffset: 0; }
.peca.on { border-color: var(--azul); color: #fff; box-shadow: 0 10px 24px -12px rgba(40, 90, 142, .7); transform: translateY(-3px); }
.peca.on::before { opacity: 1; }
.peca.on svg { color: #fff; }
.peca.on svg path { animation: desenhaIc .9s var(--curva); }
@keyframes desenhaIc { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
/* 23 peças: a última ocupa duas casas e a grelha fecha sem buraco, em 6 e em 4 colunas */
.peca:last-of-type { grid-column: span 2; aspect-ratio: auto; }
.pecas.tudo .peca { transition-delay: 0s; }
.pecas.tudo .peca.on { background-color: transparent; }
/* juntas: a grelha passa a ser uma só lâmina. Os vãos não fecham (a grelha não muda de altura e nada salta):
   a lâmina pinta-os e os contornos apagam-se */
.pecas.juntas .pecas-grelha { background: var(--azul) var(--degrade-lamina); }
.pecas.juntas .peca { transform: none; box-shadow: none; background-color: transparent; border-color: transparent; }
.pecas.juntas .peca::before { opacity: 0; }
.pecas.juntas .peca svg, .pecas.juntas .peca span { opacity: 0; }
.pecas-fim { position: absolute; inset: 0; z-index: 3; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 0 6%; text-align: center; text-wrap: balance; pointer-events: none; font-family: var(--letra-titulos); font-size: clamp(26px, 3.4vw, 54px); line-height: 1.06; letter-spacing: .02em; text-transform: uppercase; color: #fff; opacity: 0; transition: opacity .6s .4s; }
.pecas-fim span:last-child { color: #D5E0EC; }
.pecas.juntas .pecas-fim { opacity: 1; }
.pecas.juntas .pecas-grelha::after { content: ""; position: absolute; inset: 0; z-index: 4; pointer-events: none; background: linear-gradient(105deg, transparent 40%, rgba(255, 255, 255, .28) 50%, transparent 60%); background-size: 260% 100%; background-position: -70% 0; animation: varre 2.6s linear .6s 2 backwards; }
@keyframes varre { from { background-position: 130% 0; } to { background-position: -70% 0; } }
/* as colunas: 6 no ecrã largo; 4, e mais baixas, entre 860 e 1099 (os nomes cabem); 6 no tablet; 4 no telemóvel */
@media (min-width: 1100px) and (max-width: 1279px) { .peca { padding: 8px 6px; } }
@media (min-width: 860px) and (max-width: 1099px) { .pecas-grelha { grid-template-columns: repeat(4, minmax(0, 1fr)); } .peca { aspect-ratio: 4 / 3; } }
@media (max-width: 859px) { .pecas { grid-template-columns: 1fr; } .pecas-grelha { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; } .peca { font-size: 10.5px; padding: 6px; } }
@media (max-width: 599px) { .pecas-grelha { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
/* telemóveis pequenos (abaixo de 360 px): «Encomendas» cabe na peça */
@media (max-width: 359px) { .peca { font-size: 9.5px; padding: 5px; } }

/* ============ tudo ligado ao P: os raios ============
   Cada raio nasce da ponta de um pino do P e chega ao botão em traço técnico (computador.js, desenha):
   desenha-se do P para fora ao entrar na secção, e a luz corre no mesmo sentido */
.mapa { position: relative; display: grid; grid-template-columns: minmax(180px, 1fr) minmax(340px, 1.25fr) minmax(180px, 1fr); gap: clamp(36px, 6vw, 110px); align-items: start; }
.mapa-raios { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.mapa-raios path { fill: none; stroke-linecap: square; }
.mapa-raios .l { stroke: #A3B6CB; stroke-width: 1.2; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.3s var(--curva) var(--d), stroke .2s; }
.mapa.liga .mapa-raios .l { stroke-dashoffset: 0; }
.mapa-raios .q { stroke: var(--azul); stroke-width: 2.4; stroke-dasharray: .05 .95; stroke-dashoffset: 1; animation: raioAnda 2.8s linear infinite; }
@keyframes raioAnda { to { stroke-dashoffset: 0; } }
.mapa-raios g.on .l { stroke: var(--azul); stroke-width: 2.2; }
.mapa-raios g.on .q { stroke: #fff; stroke-width: 2.4; stroke-dasharray: .1 .15; animation-duration: 1.4s; }
.mapa-grp { margin-bottom: clamp(14px, 1.8vw, 24px); position: relative; }
.mapa-grp .etq { margin-bottom: 6px; color: var(--azul); }
.mapa-mod { position: relative; z-index: 1; display: grid; grid-template-columns: 22px 1fr; gap: 9px; align-items: center; width: 100%; text-align: left; padding: 6px 9px; margin-bottom: 3px; font-size: 14px; font-weight: 500; line-height: 1.2; background: rgba(255, 255, 255, .9); border: 1px solid var(--filete); transition: border-color .2s, transform .35s var(--curva); }
.mapa-mod svg { width: 20px; height: 20px; color: var(--azul); }
@media (hover: hover) { .mapa-mod:hover { border-color: var(--azul); } }
.mapa-mod.on { background: var(--azul) var(--degrade-lamina); color: #fff; border-color: var(--azul); }
.mapa-esq .mapa-mod.on { transform: translateX(6px); } .mapa-dir .mapa-mod.on { transform: translateX(-6px); }
.mapa-mod.on svg { color: #fff; }
.mapa-centro { z-index: 1; position: sticky; top: calc(var(--hdr) + 10px); }
.mapa-centro .palco-nucleo { max-width: 400px; margin: 0 auto; aspect-ratio: 1; }
/* a ficha tem a altura da mais longa (medida em computador.js): na volta automática só o texto muda, sem piscar */
.mapa-ficha { padding: 16px 18px; margin-top: -8px; }
.mapa-ficha > * { transition: opacity .2s; }
.mapa-ficha.muda > * { opacity: 0; }
.mapa-ficha .etq { color: var(--azul); }
.mapa-n { margin-top: 4px; }
.mapa-f { margin-top: 6px; font-size: 15.5px; color: var(--tinta-2); }
.mapa-l { margin-top: 8px; }
.mapa-l li { position: relative; padding: 6px 0 6px 16px; border-top: 1px solid var(--filete); font-size: 14px; line-height: 1.35; }
.mapa-l li::before { content: ""; position: absolute; left: 0; top: 12px; width: 7px; height: 7px; background: var(--azul); }
.mapa-ir { margin-top: 10px; }
@media (max-width: 999px) {
  .mapa { display: block; }
  .mapa-raios { display: none; }
  .mapa-centro { position: static; margin-bottom: 18px; }
  .mapa-centro .palco-nucleo { max-width: 220px; }
  .mapa-col { display: block; }
  .mapa-mod.on { transform: none !important; }
  .mapa-grp .mapa-ficha { margin: 6px 0 12px; }
  /* dentro do grupo, a ficha fica logo abaixo do botão: o grupo e o nome já estão à vista */
  .mapa-grp .mapa-ficha .mapa-g, .mapa-grp .mapa-ficha .mapa-n { display: none; }
  .mapa-grp .mapa-ficha .mapa-f { margin-top: 0; }
  .mapa-grp { margin-bottom: 12px; }
}
@media (prefers-reduced-motion: reduce) { .mapa-raios .q { animation: none; opacity: 0; } .mapa-raios .l { transition: none; stroke-dashoffset: 0; } }

/* ============ a porta do imobiliário: clara, com o mapa da vertical a acender camada a camada ============ */
.setores-os { margin-top: clamp(48px, 7vw, 110px); }
.porta { position: relative; display: flex; align-items: center; margin-top: clamp(18px, 2.4vw, 32px); min-height: clamp(300px, 42vh, 460px); overflow: hidden; color: var(--tinta); background: var(--folha); border: 1px solid var(--filete); isolation: isolate; }
.porta-mapa { position: absolute; top: 0; right: 0; bottom: 0; width: 60%; z-index: -1; -webkit-mask-image: linear-gradient(90deg, transparent, #000 32%); mask-image: linear-gradient(90deg, transparent, #000 32%); transform-origin: 60% 50%; transition: transform 1.2s var(--curva); }
.porta-mapa img, .porta-mapa svg { display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.porta:hover .porta-mapa { transform: scale(1.04); }
.porta-camada { opacity: 0; transition: opacity .9s var(--curva); }
.porta-camada.ver { opacity: 1; }
.porta-txt { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; width: min(620px, 50%); padding: clamp(22px, 3vw, 48px); }
.porta-txt .etq { color: var(--azul); }
.porta-txt .t0 { font-size: clamp(36px, 4vw, 72px); }
.porta-lead { max-width: 30ch; font-size: clamp(17px, 1.4vw, 21px); color: var(--tinta-2); }
.porta-sai { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; }
.porta-clone { transition: left .6s var(--curva), top .6s var(--curva), width .6s var(--curva), height .6s var(--curva); pointer-events: none; }
.porta-clone .porta-txt { transition: opacity .3s; }
.porta-clone .porta-mapa { transition: transform .9s var(--curva), width .6s var(--curva); }
.porta-clone.abre .porta-txt { opacity: 0; }
.porta-clone.abre .porta-mapa { width: 100%; transform: scale(1.25); -webkit-mask-image: none; mask-image: none; }
/* os outros setores: cartões claros que levam à conversa */
.setores-lado { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 10px; }
.setor-mini { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 14px 16px 10px; color: inherit; text-decoration: none; background: var(--folha); border: 1px solid var(--filete); transition: border-color .2s, transform .35s var(--curva); }
.setor-mini:hover { border-color: var(--azul); transform: translateY(-2px); }
.setor-mini p { font-size: 15px; }
.setor-mini .seta { margin-top: 4px; padding: 4px 0; font-size: 11.5px; }
.setor-mini:hover .seta { gap: 20px; color: var(--azul); }
@media (max-width: 859px) {
  .porta { display: block; min-height: 0; }
  .porta-mapa { position: relative; width: 100%; height: clamp(200px, 52vw, 300px); -webkit-mask-image: linear-gradient(180deg, #000 50%, transparent); mask-image: linear-gradient(180deg, #000 50%, transparent); }
  .porta-txt { width: auto; padding-top: 4px; }
}
@media (max-width: 599px) { .setores-lado { grid-template-columns: 1fr; } }

/* ============ os logos a rodar, sem parar ============ */
.logos { overflow: hidden; padding-block: clamp(12px, 2vw, 22px); margin-bottom: clamp(16px, 2.4vw, 32px); border-block: 1px solid var(--filete); -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.logos-fita { display: flex; align-items: center; gap: clamp(36px, 6vw, 84px); width: max-content; animation: logosRoda 46s linear infinite; }
/* um só tratamento: todos a uma cor, com o tamanho acertado pela área (--h, no logos.html); a cor volta ao passar o rato */
.logos-fita img { height: calc(var(--h, 1) * clamp(30px, 3.4vw, 48px)); width: auto; max-width: 200px; object-fit: contain; filter: grayscale(1) brightness(.72); opacity: .7; mix-blend-mode: multiply; transition: filter .35s, opacity .35s; }
.logos-fita img:hover { filter: none; opacity: 1; }
/* a fita para ao passar o rato e com o foco */
.logos:hover .logos-fita, .logos:focus-within .logos-fita { animation-play-state: paused; }
.logos:focus-visible { outline-offset: -3px; }
@keyframes logosRoda { to { transform: translateX(-50%); } }
/* com JavaScript (site.js, faixa): a fita anda por lá, abranda até parar ao cursor, e o realce vai pela proximidade (--p).
   O logótipo debaixo do cursor fica a cores e cresce; os vizinhos crescem menos. Por baixo, a cota azul com o nome */
.logos.fita-pronta { position: relative; touch-action: pan-y; padding-bottom: clamp(30px, 3vw, 40px); }
.logos-fita.fita-js { animation: none; will-change: transform; }
.logos-fita.fita-js img { --p: 0; transform: scale(calc(1 + var(--p) * .16)); filter: grayscale(calc(1 - var(--p))) brightness(calc(.72 + var(--p) * .28)); opacity: calc(.7 + var(--p) * .3); transition: transform .3s var(--curva), filter .3s, opacity .3s; }
.logos-fita.fita-js img:hover { filter: grayscale(calc(1 - var(--p))) brightness(calc(.72 + var(--p) * .28)); opacity: calc(.7 + var(--p) * .3); }
.logos-cota { position: absolute; left: 0; top: 0; height: 22px; pointer-events: none; opacity: 0; transition: opacity .25s; }
.logos-cota.on { opacity: 1; }
.logos-cota i { position: absolute; left: 0; right: 0; top: 0; height: 7px; border: solid var(--azul); border-width: 0 1px; transform: scaleY(0); transform-origin: top; transition: transform .25s var(--curva); }
.logos-cota i::before { content: ""; position: absolute; left: 0; right: 0; top: 3px; height: 1px; background: var(--azul); transform: scaleX(0); transform-origin: left; transition: transform .5s var(--curva) .08s; }
.logos-cota.on i { transform: none; }
.logos-cota.on i::before { transform: none; }
.logos-cota b { position: absolute; left: 50%; top: 11px; transform: translateX(-50%); font: 500 10.5px/1 var(--letra-dados); letter-spacing: .12em; text-transform: uppercase; color: var(--azul); white-space: nowrap; }
@media (prefers-reduced-motion: reduce) {
  .logos { -webkit-mask-image: none; mask-image: none; }
  .logos-fita { animation: none; flex-wrap: wrap; width: auto; justify-content: center; row-gap: 18px; }
  .logos-fita img:nth-child(n+9) { display: none; }
}

/* ============ Capacidades: as três peças a trabalhar ============ */
/* uma grelha: o título e os problemas em cima; por baixo, as três colunas à volta do P.
   Nada tem posição fixa, por isso nada cai em cima de nada, em ecrã nenhum. As margens seguem o .wrap. */
.cap-palco { position: relative; min-height: 100svh; display: grid; grid-template-columns: minmax(236px, 1fr) minmax(0, 1.5fr) minmax(236px, 1fr); grid-template-rows: auto minmax(0, 1fr) auto; grid-template-areas: "topo topo topo" "b tela c" "p tela res"; gap: 20px clamp(20px, 2.4vw, 44px); padding: calc(var(--hdr) + 18px) max(var(--g), calc((100% - 1560px) / 2 + var(--g))) 24px; overflow: hidden; }
.cap-topo { grid-area: topo; position: relative; z-index: 3; }
.cap-topo .t1 { margin-top: 8px; }
.cap-escolha { margin-top: 16px; }
html:not(.js) .cap-escolha { display: none; }
.cap-probs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.cap-prob { padding: 10px 14px; min-height: 44px; font-size: 15px; font-weight: 600; border: 1px solid var(--tinta); background: rgba(255, 255, 255, .7); transition: background-color .25s, color .25s, transform .3s var(--curva); }
@media (hover: hover) { .cap-prob:hover { transform: translateY(-2px); } }
.cap-prob[aria-pressed="true"] { background: var(--azul) var(--degrade-lamina); border-color: var(--azul); color: #fff; }
.cap-tela { grid-area: tela; position: relative; min-height: 0; }
.cap-tela .p3d { opacity: 1; }
.cap-tela.com-3d .vista-svg { display: none; }
.cap-fios { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 2; }
.cap-fios path { fill: none; stroke: var(--azul); stroke-width: 1.2; stroke-dasharray: 5 5; animation: capFio 1s linear infinite; }
@keyframes capFio { to { stroke-dashoffset: -10; } }
.cap-cols { display: contents; }
.cap-coluna { position: relative; z-index: 3; min-width: 0; }
.cap-col-b { grid-area: b; align-self: start; }
.cap-col-c { grid-area: c; align-self: center; text-align: right; }
.cap-col-p { grid-area: p; align-self: end; }
.cap-col-c ul { justify-content: flex-end; }
.cap-sub { font-size: 14px; color: var(--tinta-2); margin-bottom: 8px; }
.cap-coluna ul { display: flex; flex-wrap: wrap; gap: 6px; }
.cap-coluna h2, .cap-sub { transition: opacity .4s; }
/* o aceso não cresce: muda de cor e sobe um pouco, por isso nunca toca no vizinho nem sai da margem */
.cap-coluna li { padding: 4px 8px; font-family: var(--letra-dados); font-size: 11.5px; background: var(--folha); border: 1px solid var(--filete); color: var(--tinta-2); transition: background-color .35s, color .35s, border-color .35s, box-shadow .35s, transform .4s var(--curva), opacity .4s; transition-delay: calc(var(--k, 0) * 22ms); }
.cap-coluna li.on { background: var(--azul) var(--degrade-lamina); border-color: var(--azul); color: #fff; box-shadow: 0 6px 14px -8px rgba(40, 90, 142, .75); transform: translateY(-2px); }
/* as peças fora de foco ficam mais claras, mas o que já acendeu continua a ler-se */
.cap:is([data-fase="1"], [data-fase="2"]) .cap-col-b :is(h2, .cap-sub, li:not(.on)), .cap:is([data-fase="0"], [data-fase="2"]) .cap-col-c :is(h2, .cap-sub, li:not(.on)), .cap:is([data-fase="0"], [data-fase="1"]) .cap-col-p :is(h2, .cap-sub, li:not(.on)) { opacity: .4; }
/* a frase do fim encosta à direita e cresce para a esquerda, sobre o canto vazio da tela, para não partir palavra a palavra */
.cap .cap-res { grid-area: res; align-self: end; justify-self: end; width: max(100%, min(36vw, 520px)); position: relative; z-index: 4; font-size: clamp(24px, 2.1vw, 40px); text-align: right; text-wrap: balance; color: var(--azul); opacity: 0; transform: translateY(14px); transition: opacity .6s, transform .7s var(--curva); }
.cap .cap-res.on { opacity: 1; transform: none; }
.cap[data-fase="0"] .vs:not(.vs-h), .cap[data-fase="1"] .vs:not(.vs-b), .cap[data-fase="2"] .vs:not(.vs-l) { opacity: .18; }
.cap:not([data-fase="fim"]) .vs-h { transform: translate(-20px, -16px); } .cap:not([data-fase="fim"]) .vs-b { transform: translate(26px, -6px); } .cap:not([data-fase="fim"]) .vs-l { transform: translate(-14px, 24px); }
@media (min-width: 1200px) {
  .cap-escolha { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; }
  .cap-escolha .cap-probs { margin-top: 0; }
}
/* ecrãs baixos, lado a lado: tudo mais junto e as colunas mais largas, para a frase do fim ficar à vista */
@media (min-width: 1000px) and (max-height: 800px) {
  .cap-palco { grid-template-columns: minmax(236px, 1fr) minmax(0, 1.1fr) minmax(236px, 1fr); row-gap: 14px; padding-top: calc(var(--hdr) + 10px); padding-bottom: 16px; }
  .cap-topo .t1 { font-size: clamp(32px, min(4.5vw, 8.4vh), 84px); }
  .cap-escolha { margin-top: 12px; }
  .cap-sub { margin-bottom: 6px; }
  .cap-coluna ul { gap: 5px; }
  .cap-coluna li { padding: 3px 7px; font-size: 11px; }
}
/* tablet e telemóvel: tudo empilhado, os problemas numa grelha 2x2 e o P à largura do ecrã */
@media (max-width: 999px) {
  .cap-palco { min-height: 0; grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-template-areas: "topo" "tela" "cols"; gap: 0; padding-bottom: 20px; }
  .cap-probs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cap-prob { padding: 8px 12px; font-size: 14.5px; line-height: 1.25; text-align: left; }
  .cap-tela { height: clamp(200px, 30vh, 440px); margin: 8px calc(var(--g) * -1) 0; }
  .cap-cols { display: flex; flex-direction: column; grid-area: cols; }
  .cap-coluna { padding-top: 10px; align-self: stretch; }
  .cap-coluna ul { gap: 5px; }
  .cap-coluna li { padding: 3px 7px; }
  .cap-col-c { text-align: left; }
  .cap-col-c ul { justify-content: flex-start; }
  /* a frase do fim fica logo por baixo do P, antes das listas: vê-se junto com a peça montada, e só aparece (não desce sobre a Business) */
  .cap .cap-res { order: -1; align-self: stretch; width: auto; font-size: clamp(24px, 6vw, 40px); text-align: left; padding-top: 14px; transform: none; }
  .cap .cap-res:empty { display: none; }
  .cap-fios { display: none; }
  /* com movimento, durante a sequência a peça em foco mostra a lista toda e as outras só o que acendeu, para caber no ecrã;
     com o P montado (e em repouso) voltam as três listas inteiras, com o que acendeu em destaque */
  .cap-anima .cap-coluna { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; }
  .cap-anima .cap-coluna ul { flex-basis: 100%; margin-top: 6px; }
  .cap-anima .cap-sub { margin-bottom: 0; }
  .cap-anima .cap-cols { min-height: 23rem; }
  .cap-anima:is([data-fase="abre"], [data-fase="1"], [data-fase="2"]) .cap-col-b :is(.cap-sub, li:not(.on)), .cap-anima:is([data-fase="abre"], [data-fase="0"], [data-fase="2"]) .cap-col-c :is(.cap-sub, li:not(.on)), .cap-anima:is([data-fase="abre"], [data-fase="0"], [data-fase="1"]) .cap-col-p :is(.cap-sub, li:not(.on)) { display: none; }
}
@media (min-width: 600px) and (max-width: 999px) { .cap-tela { height: clamp(260px, 36vh, 520px); } .cap-anima .cap-cols { min-height: 16rem; } }
/* telemóvel baixo, ao alto: os problemas e o P mais pequenos, para a peça em foco caber por baixo dele
   sem os problemas irem para baixo do cabeçalho; o P fica com o que sobra do ecrã */
@media (max-width: 999px) and (max-height: 700px) and (min-height: 501px) {
  .cap-prob { padding: 6px 10px; font-size: 13.5px; }
  .cap-tela { height: clamp(108px, calc(100svh - 528px), 200px); }
  .cap-coluna { padding-top: 4px; }
}
/* telemóvel deitado: à esquerda os problemas e o P por baixo deles, à direita as colunas, a começar à altura dos problemas.
   Depois de um toque cabe tudo no ecrã de uma vez: o que se escolheu, a peça a abrir e o que ela acende. */
@media (max-width: 999px) and (max-height: 500px) {
  .cap-palco { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); grid-template-rows: auto auto auto auto 1fr; grid-template-areas: "etq etq" "h1 h1" "pede pede" "probs cols" "tela cols"; column-gap: clamp(16px, 3vw, 32px); }
  .cap-topo, .cap-escolha { display: contents; }
  .cap-topo > .etq { grid-area: etq; }
  .cap-topo .t1 { grid-area: h1; }
  .cap-pede { grid-area: pede; margin-top: 12px; }
  .cap-probs { grid-area: probs; align-self: start; margin-top: 8px; }
  .cap-prob { padding: 6px 10px; font-size: 13.5px; }
  .cap-tela { grid-area: tela; align-self: start; height: clamp(130px, calc(100svh - var(--hdr) - 136px), 300px); margin: 8px 0 0; }
  .cap .cap-res { padding-top: 8px; font-size: clamp(24px, 3.4vw, 32px); }
}
/* a Direção em base clara: o único momento escuro do site é o cano do dinheiro */
.frente-direcao { display: flex; flex-wrap: wrap; gap: 8px 28px; align-items: baseline; padding: 16px 20px; background: var(--nevoa); color: var(--tinta); border: 1px solid var(--filete-2); box-shadow: inset 3px 0 0 var(--azul); }
.frente-direcao .etq { color: var(--azul); }
.frentes-int { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: 0; border: 1px solid var(--filete-2); border-top: 0; }
.frentes-lista { display: grid; }
.frente-bt { display: block; width: 100%; text-align: left; padding: 12px 18px; border-bottom: 1px solid var(--filete); transition: background-color .2s, color .2s, padding .35s var(--curva); }
.frente-bt:last-child { border-bottom: 0; }
.frente-bt small { display: block; font-family: var(--letra-dados); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--tinta-2); }
.frente-bt span { font-size: 17px; font-weight: 500; }
.frente-bt[aria-pressed="true"] { background: var(--azul) var(--degrade-lamina); color: #fff; padding-left: 26px; }
.frente-bt[aria-pressed="true"] small { color: #D5E0EC; }
.frentes-det { padding: clamp(16px, 2vw, 28px); border: 0; box-shadow: none; }
.frentes-det .etq b { color: var(--azul); }
.frentes-det-f { margin: 8px 0 12px; }
.frentes-det-l li { position: relative; padding: 8px 0 8px 16px; border-top: 1px solid var(--filete); font-size: 15px; line-height: 1.35; }
.frentes-det-l li::before { content: ""; position: absolute; left: 0; top: 15px; width: 7px; height: 7px; background: var(--azul); }
/* no telemóvel, um acordeão: o que fica montado abre logo por baixo da frase tocada (o capacidades.js muda-o de sítio) */
@media (max-width: 859px) {
  .frentes-int { grid-template-columns: 1fr; }
  .frentes-lista > .frentes-det { border-bottom: 1px solid var(--filete); padding: 14px 18px 16px 26px; }
  .frentes-lista > .frentes-det:last-child { border-bottom: 0; }
  .frentes-lista .frentes-det-f { display: none; }
  .frentes-lista .frentes-det-l { margin-top: 8px; }
}

/* ============ Como trabalhamos: a mesma empresa, do caos ao sistema ============ */
.obra { position: relative; height: 480vh; margin-top: calc(-1 * var(--hdr)); }
/* o conjunto fica preso ao topo, logo abaixo do título: sem vazio no primeiro ecrã, e a lista não escorrega quando muda o tempo.
   O quadro ocupa a altura livre do ecrã; só nos ecrãs muito altos, quando para nos 1000 px, o que sobra divide-se em cima e em baixo */
.obra-palco { position: sticky; top: 0; height: 100svh; padding-top: calc(var(--hdr) + max(clamp(16px, 5svh, 56px), (100svh - var(--hdr) - 1000px) / 2)); display: flex; align-items: flex-start; overflow: hidden; }
.obra-grade { display: grid; grid-template-columns: minmax(220px, 300px) minmax(0, 1fr); gap: clamp(18px, 3vw, 44px); align-items: start; width: 100%; }
.obra-passos { display: grid; gap: 2px; align-self: start; }
.obra-passo { display: block; width: 100%; text-align: left; padding: 9px 12px; border-left: 2px solid var(--filete-2); transition: background-color .25s, border-color .25s; }
.obra-passo small { display: block; font-family: var(--letra-dados); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--tinta-2); }
.obra-passo b { display: block; font-family: var(--letra-titulos); font-weight: 400; font-size: 24px; line-height: 1.08; letter-spacing: .02em; text-transform: uppercase; color: var(--tinta-2); margin-top: 2px; transition: color .25s, font-size .3s; }
.obra-passo span { display: block; max-height: 0; overflow: hidden; font-size: 14.5px; line-height: 1.35; opacity: 0; transition: max-height .4s var(--curva), opacity .3s, margin .3s; }
.obra-passo.feito { border-color: var(--azul); }
.obra-passo.on { background: var(--nevoa); border-color: var(--azul); }
.obra-passo.on b { color: var(--azul); font-size: 28px; }
.obra-passo.on span { max-height: 4em; opacity: 1; margin-top: 4px; }
.obra-quadro { position: relative; height: min(calc(100svh - var(--hdr) - 2 * clamp(16px, 5svh, 56px)), 1000px); }
.obra-3d { position: absolute; inset: 0; }
/* o desenho deixa livre a faixa de baixo, onde ficam as três fotografias: nenhuma tapa o fim da história */
.obra-svg { position: absolute; inset: 0 0 auto; width: 100%; height: calc(100% - (clamp(84px, 9vw, 132px) - 10px) * .75 - 32px); }
.obra-quadro.com-3d .obra-svg { display: none; }
.ob-liga { fill: none; stroke: var(--azul); stroke-width: 1.5; }
.ob-plano { stroke: var(--azul); stroke-width: 1; stroke-dasharray: 5 5; }
.ob-no { fill: var(--filete-2); stroke: var(--tinta); stroke-width: 1; }
.ob-feito { fill: var(--azul); stroke: var(--azul); }
.ob-fuga { fill: none; stroke: #C42B1F; stroke-width: 1.5; stroke-dasharray: 4 3; }
.ob-t { font-family: var(--letra-dados); font-size: 12px; fill: #C42B1F; paint-order: stroke; stroke: var(--papel); stroke-width: 4px; stroke-linejoin: round; } .ob-t-b { fill: var(--azul); }
.ob-scan { stroke: var(--azul); stroke-width: 2; }
.ob-pulso { fill: #E0B84F; }
.obra-fotos { position: absolute; z-index: 4; right: 0; bottom: 0; display: flex; gap: 8px; }
.obra-foto { width: clamp(84px, 9vw, 132px); margin: 0; padding: 5px 5px 4px; background: #fff; box-shadow: var(--sombra-s); opacity: 0; transform: translateY(24px) rotate(4deg) scale(.9); transition: opacity .3s, transform .6s cubic-bezier(.2, 1.4, .4, 1); }
.obra-foto:nth-child(2) { transform: translateY(24px) rotate(-3deg) scale(.9); }
.obra-foto.tirada { opacity: 1; transform: rotate(-2deg); }
.obra-foto:nth-child(2).tirada { transform: rotate(1.5deg); }
.obra-foto:nth-child(3).tirada { transform: rotate(-1deg); }
.obra-foto img, .obra-foto svg { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: var(--papel); }
.obra-foto img + svg { display: none; }
.obra-foto figcaption { font-family: var(--letra-dados); font-size: 9.5px; letter-spacing: .08em; text-transform: uppercase; text-align: center; margin-top: 3px; }
.obra::after { content: ""; position: fixed; inset: 0; background: #fff; opacity: 0; pointer-events: none; z-index: 95; }
.obra.flash::after { animation: flash .45s ease-out; }
@keyframes flash { 0% { opacity: .75; } 100% { opacity: 0; } }
@media (max-width: 859px) {
  /* no telemóvel: o quadro, e por baixo os cinco tempos (o ativo por inteiro, os outros só com o nome), ao meio do ecrã */
  .obra { height: 420vh; }
  .obra-palco { padding-top: calc(var(--hdr) + max(8px, (100svh - var(--hdr) - min(50vh, 77vw + 96px) - 236px) / 2)); }
  .obra-grade { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .obra-quadro { order: 1; height: min(50vh, 77vw + 96px); }
  .obra-passos { order: 2; }
  .obra-passo { padding: 3px 10px; }
  .obra-passo:not(.on) b, .obra-passo:not(.on) span { display: none; }
  .obra-passo.on b { font-size: 26px; }
  .ob-t { font-size: 18px; }
}
@media (max-width: 859px) and (max-height: 600px) { .obra-passo:not(.on) { display: none; } }
@media (min-width: 860px) and (max-height: 600px) { .obra-passo { padding-block: 4px; } .ob-t { font-size: 18px; } }
/* computador muito baixo: os tempos que não estão ativos passam à letra de texto, para a lista caber sem descer a letra de títulos dos 24 px */
@media (min-width: 860px) and (max-height: 520px) {
  .obra-passo:not(.on) b { font-family: var(--letra-texto); font-weight: 500; font-size: 15px; letter-spacing: 0; text-transform: none; }
  /* a letra muda de família ao mesmo tempo que o tamanho: sem animar o tamanho, a Display nunca passa por baixo dos 24 px */
  .obra-passo b { transition: color .25s; }
  .obra-passo.on b { font-size: 24px; }
}
/* ecrãs baixos: o desenho ocupa a altura do quadro e as três fotografias, mais pequenas, ficam numa coluna à direita dele */
@media (max-height: 500px) {
  .obra-svg { width: calc(100% - 74px); height: 100%; }
  .obra-3d { right: 74px; }
  .obra-fotos { flex-direction: column; gap: 6px; }
  .obra-foto { width: 64px; padding: 3px; }
  .obra-foto figcaption { display: none; }
  .ob-t { font-size: 18px; }
}
/* telemóvel deitado: o tempo ativo à esquerda e o quadro à direita, com a altura toda */
@media (max-width: 859px) and (max-height: 500px) {
  .obra-palco { padding-top: calc(var(--hdr) + 12px); }
  .obra-grade { grid-template-columns: minmax(250px, 2fr) minmax(0, 3fr); }
  .obra-quadro { order: 2; height: calc(100svh - var(--hdr) - 24px); }
  .obra-passos { order: 1; }
  .obra-passo.on b { font-size: 24px; }
}
/* e, enquanto só se vê o tempo ativo, as fotografias passam para baixo dele, na coluna da esquerda, e o desenho fica com a largura toda */
@media (max-width: 859px) and (max-height: 500px) and (prefers-reduced-motion: no-preference) {
  html.js .obra-fotos { right: calc(100% + 16px); flex-direction: row; }
  html.js .obra-svg { width: 100%; }
  html.js .obra-3d { right: 0; }
}
/* sem movimento, ou sem JavaScript: os cinco tempos lêem-se de seguida, com o desenho final e as três fotografias */
@media (prefers-reduced-motion: reduce) {
  .obra { height: auto; } .obra-palco { position: static; height: auto; }
  .obra-passo span { max-height: none; opacity: 1; } .obra-passo:not(.on), .obra-passo:not(.on) b, .obra-passo:not(.on) span { display: block !important; }
  .obra-foto { opacity: 1; transform: none; }
}
html:not(.js) .obra { height: auto; } html:not(.js) .obra-palco { position: static; height: auto; }
html:not(.js) .obra-passo span { max-height: none; opacity: 1; margin-top: 4px; }
html:not(.js) .obra-passo, html:not(.js) .obra-passo b, html:not(.js) .obra-passo span { display: block !important; }
html:not(.js) .obra-foto { opacity: 1; transform: none; }

.em-rotulos { transition: opacity .35s; }
.em-rotulos.longe { opacity: 0; }