/* CSSUL — animações extras (versão de teste). Tudo é decorativo: sem movimento quando o visitante pede "menos movimento". */
:root { --ok: #1f7a52; --ok-soft: #e8f6ee; --ok-line: #bfe4cf; --no-soft: #fdecea; --no-line: #f4c3be; }
.head h2 em, .hero h1 em { font-style: normal; background: linear-gradient(90deg, var(--cyan-dark), #d08a1e 120%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
.hero h1 em { background: linear-gradient(90deg, #5fd6d6, #f2c46d 110%); -webkit-background-clip: text; background-clip: text; }
.section--dark .head h2 em { background: linear-gradient(90deg, #5fd6d6, #f2c46d 110%); -webkit-background-clip: text; background-clip: text; }

/* ---------- barra de progresso da rolagem sob o menu ---------- */
.hdr-progress { position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; pointer-events: none; overflow: hidden; }
.hdr-progress i { display: block; height: 100%; width: 100%; transform: scaleX(0); transform-origin: left center; background: linear-gradient(90deg, var(--cyan), #d08a1e); }

/* ---------- botão do WhatsApp com anel pulsante ---------- */
.wa-float::before { content: ''; position: absolute; inset: 0; border-radius: 50%; border: 2px solid rgba(37, 211, 102, .65); animation: wa-ring 2.8s ease-out infinite; pointer-events: none; }
@keyframes wa-ring { 0% { transform: scale(1); opacity: .9; } 70%, 100% { transform: scale(1.55); opacity: 0; } }

/* ---------- divisor em treliça de andaime no topo das faixas escuras ---------- */
.section--dark, .cta { position: relative; }
.section--dark::before, .cta::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 22px; pointer-events: none; opacity: .9;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='22' viewBox='0 0 44 22'%3E%3Cg fill='none' stroke='%2320a6a6' stroke-opacity='.35' stroke-width='1.4'%3E%3Cpath d='M0 .7h44M0 21.3h44M.7 0v22M22 0v22M0 0l22 22M44 0 22 22'/%3E%3C/g%3E%3C/svg%3E") repeat-x top left / 44px 22px;
  -webkit-mask-image: linear-gradient(#000, transparent); mask-image: linear-gradient(#000, transparent); }

/* ---------- 1/9. faixa de diferenciais em movimento ---------- */
.mq { position: relative; padding: 26px 0 10px; overflow: hidden; contain: paint; }
.mq::before, .mq::after { content: ''; position: absolute; top: 0; bottom: 0; width: 9%; z-index: 2; pointer-events: none; }
.mq::before { left: 0; background: linear-gradient(90deg, #fff, rgba(255, 255, 255, 0)); }
.mq::after { right: 0; background: linear-gradient(270deg, #fff, rgba(255, 255, 255, 0)); }
.mq__track { display: flex; width: max-content; will-change: transform; backface-visibility: hidden; animation: mq 60s linear infinite; }
.mq:hover .mq__track, .mq:focus-within .mq__track { animation-play-state: paused; }
.mq ul { display: flex; flex: none; gap: 0; padding: 0; margin: 0; list-style: none; }
.mq li { display: flex; align-items: center; gap: 12px; padding: 0 30px; white-space: nowrap; font-weight: 800; font-size: 13.5px; letter-spacing: .09em; text-transform: uppercase; color: var(--petrol); }
.mq__ico { width: 22px; height: 22px; fill: none; stroke: var(--cyan); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.mq li:nth-child(even) .mq__ico { stroke: #d08a1e; }
@keyframes mq { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } }

/* ---------- 2/3. fachada que se constrói + passo a passo ---------- */
.how { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.05fr); gap: 56px; align-items: center; }
.how__art, .stage { position: relative; }
.how__art .fx, .stage .fx { border-radius: 22px; overflow: hidden; box-shadow: 0 16px 36px -20px rgba(7, 46, 52, .38); }
.how__art { position: sticky; top: 110px; max-width: 430px; width: 100%; justify-self: center; }
.stage { max-width: 440px; width: 100%; justify-self: center; }
.fx { display: block; width: 100%; height: auto; max-height: 400px; margin-inline: auto; }
[data-scrub], [data-play] { --p: 0; }
.fx .cloud ellipse { fill: #fff; opacity: .85; }
.fx .gnd, .fx .fl { fill: var(--petrol); opacity: .85; }
.fx .bld { fill: #fff; stroke: #b9d7d7; stroke-width: 2; } .fx .roof { fill: #cfe0e0; }
.fx .win { fill: #dcecec; stroke: #b9d7d7; stroke-width: 1.5; }
.fx .pt { stroke: var(--petrol); stroke-width: 4.5; stroke-linecap: round; }
.fx .lg { stroke: var(--cyan-dark); stroke-width: 3.5; stroke-linecap: round; }
.fx .br { stroke: var(--cyan); stroke-width: 2.4; stroke-linecap: round; }
.fx .gr { stroke: var(--cyan-dark); stroke-width: 2.6; stroke-linecap: round; opacity: .8; }
.fx .dk { fill: #c27a12; }
.fx .lv { --t: clamp(0, calc((var(--p) - var(--s)) * 7), 1); opacity: var(--t); transform: translateY(calc((1 - var(--t)) * 38px)); }
.fx .tela { --tt: clamp(0, calc((var(--p) - .74) * 4), 1); transform-box: fill-box; transform-origin: 50% 0; transform: scaleY(var(--tt)); opacity: calc(var(--tt) * 1.2); }
.fx .tela rect:first-child { opacity: 1; stroke: var(--cyan-dark); stroke-width: 2.5; stroke-opacity: .7; } .fx .tela__edge { fill: var(--petrol); }
.fx--tela .lv { opacity: 1; transform: none; }
.fx--tela .tela { --tt: clamp(0, calc(var(--p) * 1.5), 1); }
.how__steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; counter-reset: s; }
.how__step { position: relative; display: grid; grid-template-columns: 52px 1fr; column-gap: 16px; padding: 20px 22px; border-radius: 18px; background: #fff; border: 1px solid var(--line); overflow: hidden; transition: border-color .35s, box-shadow .35s, background .35s; }
.how__step h3 { grid-column: 2; font-size: 18px; margin-bottom: 4px; }
.how__step p { grid-column: 2; color: var(--muted); font-size: 15px; }
.how__ico { grid-row: 1 / span 2; width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; background: var(--cyan-soft); color: var(--cyan-dark); transition: background .35s, color .35s, transform .35s; }
.how__ico svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.how__num { position: absolute; right: 16px; top: 4px; font-size: 64px; font-weight: 800; line-height: 1; color: var(--cyan); opacity: .12; letter-spacing: -.04em; transition: opacity .35s; }
.how__step.is-on { border-color: var(--cyan); box-shadow: 0 14px 34px rgba(32, 166, 166, .18); background: linear-gradient(180deg, #fff, #f4fbfb); }
.how__step.is-on .how__ico { background: var(--cyan); color: #fff; transform: scale(1.06) rotate(-4deg); }
.how__step.is-on .how__num { opacity: .22; }

/* ---------- cenário (desenho estático dentro das ilustrações) ---------- */
.fx .sun { fill: #f6d58b; opacity: .9; }
.fx .sk { fill: #d3e6e6; stroke: #b9d6d6; stroke-width: 1.5; } .fx .sk2 { fill: #e1efef; } .fx .skw { fill: #eef6f6; } .fx .skl { stroke: #b9d6d6; stroke-width: 1.4; fill: none; }
.fx .crane { fill: #d08a1e; opacity: .9; } .fx .crane-l { stroke: #d08a1e; stroke-width: 2; fill: none; stroke-linecap: round; }
.fx .tree-t { fill: #9a7f4f; } .fx .tree-c { fill: #7cc3a8; } .fx .tree-c2 { fill: #5fae92; }
.fx .rd { fill: #c5dada; } .fx .rd-l { stroke: #fff; stroke-width: 3; stroke-dasharray: 18 14; }
.fx .wall { fill: #f1f8f8; } .fx .brick { stroke: #d2e4e4; stroke-width: 1.4; fill: none; }
.fx .pil { fill: #cde0e0; stroke: #b3cfcf; stroke-width: 1.5; }
.fx .cone path:first-child { fill: #e8892a; } .fx .cone rect { fill: #3a5456; } .fx .cone-b { stroke: #fff; stroke-width: 3; }
.fx .man circle, .fx .man rect { fill: #2d5558; } .fx .man .hat { fill: #d08a1e; }
.fx .fence { stroke: #b3cfcf; stroke-width: 2; fill: none; } .fx .pallet rect { fill: #a8742c; }
.fx .hook .hk { fill: none; stroke: #d08a1e; stroke-width: 3; }

/* ---------- 10. guia rápido de segurança (abas + balão + progresso) ---------- */
.gr { display: grid; grid-template-columns: minmax(240px, .72fr) minmax(0, 1.5fr); gap: 36px; align-items: start; }
.gr__side { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; padding-bottom: 8px; }
.gr__bubble { position: relative; width: 100%; background: #f5fbfb; border: 1px solid #cfe8e8; border-radius: 20px; padding: 16px 18px 18px; box-shadow: var(--shadow); min-height: 112px; }
.gr__bubble::after { content: ''; position: absolute; left: 44px; bottom: -11px; width: 22px; height: 22px; background: #f5fbfb; border-right: 1px solid #cfe8e8; border-bottom: 1px solid #cfe8e8; transform: rotate(45deg); border-radius: 0 0 6px 0; }
.gr__tag { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #8a5a0b; background: var(--amber-soft); padding: 4px 10px; border-radius: 999px; margin-bottom: 8px; }
.gr__bubble p { font-weight: 600; color: var(--petrol); font-size: 16px; line-height: 1.45; transition: opacity .25s, transform .25s; }
.gr__bubble p.is-swap { opacity: 0; transform: translateY(6px); }
.gr__hero { position: relative; width: 172px; height: 172px; margin-top: 14px; }
.gr__scaf { position: absolute; inset: 0; width: 100%; height: 100%; }
.gr__scaf .gs path { fill: none; stroke: var(--cyan-dark); stroke-width: 3.2; stroke-linecap: round; } .gr__scaf .gx { stroke-width: 1.8 !important; stroke: var(--cyan) !important; opacity: .65; }
.gr__scaf .gd { fill: #c27a12; opacity: .85; } .gr__scaf .gl { fill: #d08a1e; }
.gr__logo { position: absolute; left: 50%; top: 50%; width: 78px; height: 78px; margin: -39px 0 0 -39px; border-radius: 50%; background: #fff; box-shadow: 0 12px 28px rgba(10, 38, 41, .2); display: grid; place-items: center; }
.gr__logo img { width: 54px; height: 54px; object-fit: contain; }
.gr__pause { position: absolute; right: 4px; bottom: 0; width: 42px; height: 42px; border-radius: 50%; background: #fff; border: 1px solid var(--line); color: var(--petrol); display: grid; place-items: center; cursor: pointer; box-shadow: var(--shadow); }
.gr__pause svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.gr__pause .i-y { display: none; } .gr__pause[aria-pressed="true"] .i-p { display: none; } .gr__pause[aria-pressed="true"] .i-y { display: block; fill: currentColor; }
.gr__tabs { display: flex; flex-wrap: wrap; gap: 10px; }
.gr__tabs button { font: 700 14px var(--font); color: var(--petrol); background: var(--cyan-soft); border: 1px solid transparent; border-radius: 999px; padding: 10px 18px; cursor: pointer; transition: background .2s, color .2s, transform .2s; }
.gr__tabs button:hover { background: #cfeaea; }
.gr__tabs button[aria-selected="true"] { background: var(--petrol); color: #fff; transform: translateY(-1px); box-shadow: 0 8px 18px rgba(18, 63, 67, .25); }
.gr__bar { height: 5px; border-radius: 99px; background: #d3ecec; margin: 18px 0 18px; overflow: hidden; }
.gr__bar i { will-change: transform; display: block; height: 100%; width: 100%; transform: scaleX(0); transform-origin: left center; background: linear-gradient(90deg, var(--cyan), #d08a1e); border-radius: 99px; }
.gr__panel { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.gr__panel[hidden] { display: none; }
.gr__panel:not([hidden]) .gr__card { animation: gr-in .5s cubic-bezier(.2, .8, .2, 1) both; } .gr__panel:not([hidden]) .gr__card--no { animation-delay: .08s; }
@keyframes gr-in { from { opacity: 0; transform: translateY(10px); } }
.gr__card { border-radius: 18px; padding: 20px 22px; min-height: 210px; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; }
.gr__card h3 { display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 18px; margin-bottom: 12px; }
.gr__card h3 svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.gr__card ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; width: 100%; max-width: 330px; }
.gr__card li { position: relative; padding: 0; font-size: 15px; color: #33474a; line-height: 1.45; }
.gr__card li + li { padding-top: 10px; border-top: 1px dashed currentColor; border-top-color: color-mix(in srgb, currentColor 28%, transparent); }
.gr__card--ok { background: var(--ok-soft); border: 1px solid var(--ok-line); color: var(--ok); } .gr__card--ok h3 { color: var(--ok); }
.gr__card--no { background: var(--no-soft); border: 1px solid var(--no-line); color: var(--red); } .gr__card--no h3 { color: var(--red); }

/* ---------- 11. selo circular com texto girando ---------- */
.split__media--selo { position: relative; overflow: visible; background: none; box-shadow: none; }
.split__media--selo > img { border-radius: 18px; box-shadow: var(--shadow); display: block; }
.selo { position: absolute; right: -22px; bottom: -34px; width: 190px; height: 190px; z-index: 2; }
.selo__ring { position: absolute; inset: 0; width: 100%; height: 100%; animation: gira 28s linear infinite; will-change: transform; background: #fff; border-radius: 50%; box-shadow: 0 16px 38px rgba(10, 38, 41, .22); }
.selo__ring text { font: 800 15px var(--font); letter-spacing: .06em; fill: var(--petrol); }
.selo__dash { fill: none; stroke: var(--cyan); stroke-width: 1.4; stroke-dasharray: 3 6; }
.selo__core { position: absolute; left: 50%; top: 50%; width: 96px; height: 96px; margin: -48px 0 0 -48px; border-radius: 50%; display: grid; place-items: center; background: #fff; box-shadow: inset 0 0 0 2px var(--cyan-soft); }
.selo__core img { width: 66px; height: 66px; object-fit: contain; }
@keyframes gira { to { transform: rotate(360deg); } }
.selo__chip { position: absolute; display: inline-flex; align-items: center; gap: 8px; background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 8px 12px; font: 700 12.5px var(--font); color: var(--petrol); box-shadow: 0 10px 24px rgba(10, 38, 41, .16); white-space: nowrap; animation: oscila 5.2s ease-in-out infinite; }
.selo__chip svg { width: 18px; height: 18px; fill: none; stroke: var(--cyan-dark); stroke-width: 2; stroke-linejoin: round; }
.selo__chip--a { right: 14px; bottom: calc(100% + 12px); } .selo__chip--c { right: calc(100% + 8px); top: 34px; animation-delay: -1.2s; } .selo__chip--b { right: calc(100% - 2px); bottom: 6px; animation-delay: -2.4s; }
@keyframes oscila { 50% { transform: translateY(-9px); } }

/* ---------- 6. linha do tempo desde 2015 ---------- */
.tl { position: relative; padding: 56px 0 8px; display: grid; grid-template-columns: 1fr 1fr; gap: 24px 28px; }
.tl__line { position: absolute; left: 6px; right: 6px; top: 22px; height: 8px; border-radius: 99px; background: #d3ecec; }
.tl__fill { position: absolute; left: 0; top: 0; bottom: 0; width: calc(var(--p) * 100%); border-radius: 99px; background: repeating-linear-gradient(135deg, var(--cyan) 0 10px, var(--cyan-dark) 10px 20px); }
.tl__climb { position: absolute; top: -22px; left: calc(var(--p) * (100% - 24px)); width: 24px; height: 36px; color: #c27a12; }
.tl__climb svg { width: 24px; height: 36px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.tl__node { position: relative; padding-top: 4px; }
.tl__node b { display: block; font-size: clamp(34px, 5vw, 52px); font-weight: 800; letter-spacing: -.03em; color: var(--petrol); line-height: 1; margin-bottom: 8px; }
.tl__node b em { font-style: normal; }
.tl__node span { color: var(--muted); font-size: 16px; display: block; max-width: 340px; }
.tl__node--b { text-align: right; justify-self: end; }
.tl__node--b span { margin-left: auto; }
.tl__node--a { opacity: calc(.25 + var(--p) * 4); } .tl__node--b { opacity: clamp(.2, calc((var(--p) - .55) * 4), 1); }
.tl__chips { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; list-style: none; padding: 0; margin: 8px 0 0; }
.tl__chips li { padding: 10px 16px; background: #fff; border: 1px solid var(--line); border-radius: 999px; font-weight: 700; font-size: 14px; color: var(--petrol); box-shadow: var(--shadow); --c: clamp(0, calc((var(--p) - .62) * 6 - var(--i, 0) * .25), 1); opacity: var(--c); transform: translateY(calc((1 - var(--c)) * 16px)) scale(calc(.92 + var(--c) * .08)); }
.tl__chips li:nth-child(2) { --i: 1; } .tl__chips li:nth-child(3) { --i: 2; } .tl__chips li:nth-child(4) { --i: 3; }

/* ---------- 7/8/9. escora, balanço e material cintado ---------- */
.fx--escora .sl, .fx--balanco .wl { fill: #cfe0e0; } .fx--escora .sl__h { stroke: #9fbcbc; stroke-width: 2; }
.fx--escora .pl { fill: var(--petrol); } .fx--escora .ot { fill: var(--cyan-dark); } .fx--escora .it { fill: var(--cyan); } .fx--escora .tp { fill: var(--petrol); }
.fx--escora .col rect { fill: #c27a12; } .fx--escora .col path { stroke: #fff; stroke-width: 1.6; fill: none; }
.fx--escora { --t: clamp(0, calc(var(--p) * 1.35), 1); }
.fx--escora .inn { transform: translateY(calc(250px - var(--t) * 160px)); }
.fx--escora .col { transform-box: fill-box; transform-origin: center; transform: rotate(calc(var(--t) * 720deg)); }
.fx--escora .vg { opacity: clamp(0, calc((var(--p) - .62) * 5), 1); } .fx--escora .vg rect { fill: #c27a12; }
.fx--escora .ld { opacity: clamp(0, calc((var(--p) - .8) * 6), 1); } .fx--escora .ld path { stroke: var(--red); stroke-width: 3.4; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.fx--balanco .wn rect { fill: #e9f3f3; stroke: #b9d7d7; stroke-width: 2; }
.fx--balanco { --t: clamp(0, calc(var(--p) * 1.5), 1); }
.fx--balanco .bal { transform-box: view-box; transform-origin: 170px 246px; transform: scaleX(var(--t)); }
.fx--balanco .dk { fill: #c27a12; } .fx--balanco .br { stroke: var(--cyan-dark); stroke-width: 5; fill: none; stroke-linecap: round; } .fx--balanco .bm { stroke: var(--petrol); stroke-width: 5; fill: none; }
.fx--balanco .grd { opacity: clamp(0, calc((var(--p) - .55) * 5), 1); } .fx--balanco .grd path { stroke: var(--cyan); stroke-width: 4; fill: none; stroke-linecap: round; }
.fx--balanco .pk { opacity: clamp(0, calc((var(--p) - .8) * 6), 1); transform: translateY(calc((1 - clamp(0, calc((var(--p) - .8) * 6), 1)) * -30px)); } .fx--balanco .pk rect { fill: var(--petrol); } .fx--balanco .pk path { stroke: var(--petrol); stroke-width: 4; fill: none; }
.fx--cintado .bar { --t: clamp(0, calc((var(--p) - var(--s)) * 5), 1); fill: var(--cyan-dark); stroke: var(--petrol); stroke-width: 3; opacity: var(--t); transform: translateY(calc((1 - var(--t)) * -90px)); }
.fx--cintado .bar:nth-of-type(odd) { fill: var(--cyan); }
.fx--cintado .st { transform-box: fill-box; transform-origin: 50% 0; transform: scaleY(clamp(0, calc((var(--p) - .66) * 3.2), 1)); } .fx--cintado .st rect { fill: #c27a12; }

/* ---------- checklist de inspeção que se marca sozinho ---------- */
.rules[data-ticks] .ico { transition: transform .5s cubic-bezier(.3, 1.6, .5, 1), opacity .4s, color .4s; transition-delay: calc(var(--i, 0) * .14s); opacity: .25; transform: scale(.5); }
.rules[data-ticks].is-ticked .ico { opacity: 1; transform: none; color: var(--ok); }
.rules[data-ticks] li { transition: border-color .4s, background .4s; transition-delay: calc(var(--i, 0) * .14s); }
.rules[data-ticks].is-ticked li { border-color: var(--ok-line); background: linear-gradient(180deg, #fff, #f6fcf8); }

/* ---------- galeria com zoom lento e legenda que desliza ---------- */
.gallery img { animation: zoom-lento 14s ease-in-out infinite alternate; transform-origin: 50% 60%; }
.gallery figure:nth-child(2) img { animation-delay: -4s; } .gallery figure:nth-child(3) img { animation-delay: -8s; } .gallery figure:nth-child(4) img { animation-delay: -11s; }
@keyframes zoom-lento { from { transform: scale(1); } to { transform: scale(1.09); } }
.gallery figcaption { transform: translateY(8px); opacity: .92; transition: transform .4s, opacity .4s; }
.gallery figure:hover figcaption { transform: none; opacity: 1; }

/* ---------- responsivo ---------- */
@media (max-width: 940px) {
  .how, .gr { grid-template-columns: minmax(0, 1fr); }
  .gr > *, .how > * { min-width: 0; }
  .how__art { position: static; max-width: 520px; margin-inline: auto; }
  .gr__side { max-width: 420px; margin-inline: auto; }
  .selo { right: -8px; width: 150px; height: 150px; bottom: -26px; } .selo__core { width: 76px; height: 76px; margin: -38px 0 0 -38px; } .selo__core img { width: 52px; height: 52px; }
  .selo__ring text { font-size: 15px; } .selo__chip { display: none; }
  .tl { grid-template-columns: 1fr; padding-top: 52px; } .tl__node--b { text-align: left; justify-self: start; } .tl__node--b span { margin-left: 0; }
}
@media (max-width: 680px) {
  .gr__panel { grid-template-columns: minmax(0, 1fr); } .gr__card { min-height: 0; }
  .gr__tabs { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 6px; scrollbar-width: thin; } .gr__tabs button { flex: none; }
  .mq li { padding: 0 20px; font-size: 12.5px; }
}

/* ---------- menos movimento ---------- */
@media (prefers-reduced-motion: reduce) {
  .mq { overflow-x: auto; } .mq::before, .mq::after { display: none; } .mq__track { animation: none; }
  .wa-float::before, .section--dark::before, .cta::before, .gr__scaf .gl, .selo__ring, .selo__chip, .gallery img { animation: none !important; }
  .gr__panel:not([hidden]) .gr__card { animation: none; }
}
@media print { .hdr-progress, .section--dark::before, .cta::before { display: none; } }

h2{text-wrap:balance}

/* espaço entre a linha divisória (feixe) e o título da seção seguinte */
.build-on .section:not(.section--alt):not(.section--dark) + .section:not(.section--alt):not(.section--dark) { padding-top: 48px; }

/* desempenho: o cabeçalho já é quase opaco, então o desfoque de fundo só custa quadros */
.header, .pagenav { -webkit-backdrop-filter: none; backdrop-filter: none; }

/* ---------- construção por blocos (disparada ao entrar na tela, rápida e reversível) ---------- */
.build-on .bd { opacity: 0; transform: translate3d(var(--dx, 0), 46px, 0) scale(.95); }
.build-on .bd--wall { opacity: 1; transform: translate3d(0, 16px, 0); clip-path: inset(100% 0 0 0); }
.build-on .bd, .build-on .bd.bd-run { transition: opacity .55s ease, transform .7s cubic-bezier(.2, .8, .2, 1), clip-path .8s cubic-bezier(.2, .8, .2, 1); transition-delay: var(--dl, 0s); }
.build-on .bd.is-in { opacity: 1; transform: none; }
.build-on .bd--wall.is-in { clip-path: inset(0 0 0 0); }
.build-snap .bd, .build-snap .bd.bd-run { transition: none !important; }
.build-on main > section > .beam { transition: transform 1s cubic-bezier(.2, .8, .2, 1); }
.build-snap main > section > .beam { transition: none !important; }
.build-on main > section > .beam.is-in { transform: scaleX(1); }

/* ---------- linha do tempo (texto + cartão) ---------- */
.tlx { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 56px; align-items: center; }
.tlx__copy h2, .pv__copy h2 { font-size: clamp(28px, 3.2vw, 38px); font-weight: 800; }
.tlx__copy h2 em, .pv__copy h2 em { font-style: normal; background: linear-gradient(90deg, var(--cyan-dark), #d08a1e 120%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
.tlx__copy p { margin-top: 14px; color: #3d5558; font-size: 17px; }
.tlx__facts { margin: 24px 0 0; display: grid; gap: 0; border-top: 1px solid var(--line); }
.tlx__facts > div { display: grid; grid-template-columns: 130px 1fr; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.tlx__facts dt { font-size: 12.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); padding-top: 2px; }
.tlx__facts dd { margin: 0; font-weight: 600; color: var(--petrol); }
.tl--card { background: #fff; border: 1px solid var(--line); border-radius: 22px; box-shadow: var(--shadow); padding: 54px 30px 28px; }
.tl--card .tl__line { left: 30px; right: 30px; top: 26px; }
.tl--card .tl__climb { left: calc(var(--p) * (100% - 24px)); }
.tl--card .tl__node b { font-size: clamp(32px, 3.6vw, 44px); }
.tl--card .tl__node span { font-size: 14.5px; }
.tl--card .tl__chips { justify-content: flex-start; margin-top: 4px; }
.tl--card .tl__chips li { box-shadow: none; background: var(--cyan-soft); border-color: transparent; font-size: 13px; padding: 8px 13px; }

/* ---------- "veja na prática": texto + animação lado a lado ---------- */
.pv { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 56px; align-items: center; }
.pv__lead { margin-top: 14px; color: #3d5558; font-size: 17px; }
.pv__steps { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 8px; }
.pstep { display: flex; align-items: center; gap: 12px; padding: 9px 14px; border-radius: 12px; background: #fff; border: 1px solid var(--line); font-size: 15px; color: #3d5558; transition: border-color .3s, background .3s, color .3s, box-shadow .3s; }
.pstep__n { flex: none; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-size: 12.5px; font-weight: 800; background: var(--cyan-soft); color: var(--cyan-dark); transition: background .3s, color .3s; }
.pstep b { font-weight: 700; }
.pstep.is-on { border-color: var(--cyan); background: linear-gradient(180deg, #fff, #f4fbfb); color: var(--petrol); box-shadow: 0 10px 24px rgba(32, 166, 166, .14); }
.pstep.is-on .pstep__n { background: var(--cyan); color: #fff; }
.pv__now { margin: 14px 0 16px; min-height: 4.6em; color: var(--muted); font-size: 15.5px; border-left: 3px solid var(--amber, #d08a1e); padding-left: 14px; }
.pv .link-arrow { margin-top: 2px; }
@media (max-width: 940px) {
  .tlx, .pv { grid-template-columns: minmax(0, 1fr); gap: 34px; }
  .how { grid-template-columns: minmax(0, 1fr); }
  .stage { max-width: 420px; }
  .tlx__facts > div { grid-template-columns: 110px 1fr; }
}
@media (max-width: 680px) { .tl--card { padding: 52px 18px 22px; } .tl--card .tl__line { left: 18px; right: 18px; } .tl--card { grid-template-columns: 1fr; } .tl--card .tl__node--b { text-align: left; justify-self: start; } .tl--card .tl__node--b span { margin-left: 0; } }

/* ---------- ilustrações realistas (fx3): revelação por etapas controlada por --p ---------- */
.fx3 .ra, .fx3 .rf, .fx3 .rx, .fx3 .ry, .fx3 .ryb, .fx3 .rs { --t: clamp(0, calc((var(--p) - var(--a, 0)) * var(--k, 6)), 1); opacity: var(--t); }
.fx3 .ra { transform: translate(calc((1 - var(--t)) * var(--dx, 0px)), calc((1 - var(--t)) * var(--dy, 28px))); }
.fx3 .rx { transform-box: fill-box; transform-origin: 0 50%; transform: scaleX(var(--t)); }
.fx3 .ry { transform-box: fill-box; transform-origin: 50% 0; transform: scaleY(var(--t)); }
.fx3 .ryb { transform-box: fill-box; transform-origin: 50% 100%; transform: scaleY(var(--t)); }
.fx3 .rs { transform-box: fill-box; transform-origin: 50% 100%; transform: scale(var(--t)); }
.fx3 .pt3 { --w: clamp(0, calc((var(--p) - .7) * 4), 1); opacity: clamp(0, calc((var(--p) - var(--a, .66)) * 8), 1); transform: translateX(calc(var(--w) * 150px)); }
.fx3 .cr { --tt: clamp(0, calc(var(--p) * 1.5), 1); --ly: calc(60 + (1 - var(--tt)) * 320); }
.fx3 .cr__load { transform: translateY(calc((var(--ly) + 40) * 1px)); }
.fx3 .cr__cab { transform-box: fill-box; transform-origin: 50% 0; transform: scaleY(calc(var(--ly) / 380)); }
.fx3--escora { --te: clamp(0, calc(var(--p) * 1.7), 1); }
.fx3--escora .es__in, .fx3--escora .es__up { transform: translateY(calc((1 - var(--te)) * 70px)); }
@media (prefers-reduced-motion: reduce) { .fx3 .ra, .fx3 .rf, .fx3 .rx, .fx3 .ry, .fx3 .ryb, .fx3 .rs { opacity: 1; transform: none; } }