/* Casas Pinheirão — animação "Como construímos no seu terreno" */
.obra{--o-ink:#152326;--o-muted:#5f7174;--o-line:#dce1d7;--o-pine:#075f60;--o-pine2:#008f89;--o-gold:#68e1d7;color:var(--o-ink);font-family:"DM Sans",Arial,sans-serif;line-height:1.65}
.obra h2{font-family:Manrope,Arial,sans-serif;font-weight:700;color:var(--o-ink);font-size:clamp(2rem,3.2vw,3rem);line-height:1.15;letter-spacing:-.045em;margin:12px 0 24px}
.obra .section-heading p{color:var(--o-muted);font-size:16px}
.obra .eyebrow{color:var(--o-pine2)}
.obra{padding:80px 0;background:#fff;border-bottom:1px solid var(--o-line);overflow:hidden}
.obra .section-heading{margin-bottom:36px}
.obra-grid{display:grid;grid-template-columns:1.25fr 1fr;gap:48px;align-items:center}
.obra-stage{position:relative;background:linear-gradient(180deg,#e6f6f5 0%,#f4fbfa 62%,#fff 100%);border:1px solid var(--o-line);border-radius:6px;overflow:hidden}
.obra-scene{display:block;width:100%;height:auto}
.obra-badge{position:absolute;top:16px;left:16px;display:inline-flex;align-items:center;gap:8px;background:var(--o-pine);color:#fff;font:700 11px/1 'DM Sans',Arial,sans-serif;letter-spacing:1.6px;text-transform:uppercase;padding:9px 12px;border-radius:3px}
.obra-badge b{color:var(--o-gold);font-weight:700}
.obra-controls{position:absolute;right:14px;bottom:14px;display:flex;gap:8px}
.obra-controls button{border:1px solid var(--o-line);background:#fffffff0;color:var(--o-pine);border-radius:3px;padding:8px 12px;font-size:12px;font-weight:600;cursor:pointer;line-height:1}
.obra-controls button:hover{background:var(--o-pine);color:#fff;border-color:var(--o-pine)}
.obra-controls button:focus-visible,.obra-step button:focus-visible{outline:2px solid var(--o-pine2);outline-offset:2px}

/* Lista de etapas */
.obra-steps{list-style:none;margin:0;padding:0;counter-reset:obra}
.obra-step{border-top:1px solid var(--o-line);position:relative}
.obra-step:last-child{border-bottom:1px solid var(--o-line)}
.obra-step button{all:unset;box-sizing:border-box;display:grid;grid-template-columns:44px 1fr;gap:4px 12px;width:100%;padding:14px 4px;cursor:pointer}
.obra-num{grid-row:span 2;font:700 12px/1 Manrope,Arial,sans-serif;color:var(--o-pine2);padding-top:5px;letter-spacing:1px}
.obra-step strong{font-family:Manrope,Arial,sans-serif;font-size:1.02rem;letter-spacing:-.02em;color:var(--o-ink);transition:color .3s}
.obra-step p{margin:0;font-size:14px;color:var(--o-muted);line-height:1.55}
.obra-step:after{content:'';position:absolute;left:0;top:-1px;height:2px;width:0;background:var(--o-pine2)}
.obra.is-js .obra-step p{max-height:0;opacity:0;overflow:hidden;transition:max-height .45s ease,opacity .35s ease}
.obra.is-js .obra-step.is-active p{max-height:120px;opacity:1}
.obra.is-js .obra-step:not(.is-active):not(.is-done) strong{color:var(--o-muted)}
.obra-step.is-done .obra-num:after{content:' ✓';color:var(--o-pine2)}
.obra-step.is-active strong{color:var(--o-pine)}
.obra-step.is-active:after{animation:obraBar var(--obra-dur,3600ms) linear forwards}
.obra.is-paused .obra-step.is-active:after{animation-play-state:paused}
@keyframes obraBar{from{width:0}to{width:100%}}
.obra-cta{margin-top:26px;display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.obra-cta small{color:var(--o-muted);font-size:12px}

/* ---------- Cena SVG ---------- */
.obra-scene *{transform-box:fill-box}
.o-cloud{animation:obraCloud 38s linear infinite}
.o-cloud.c2{animation-duration:52s;animation-delay:-20s}
@keyframes obraCloud{from{transform:translateX(-140px)}to{transform:translateX(760px)}}

/* Estado inicial (com JS): tudo escondido, revelado por etapa */
.obra.is-js .o-g{transition:opacity .7s ease,transform .9s cubic-bezier(.2,.8,.2,1)}
.obra.is-js .o-pin,.obra.is-js .o-stakes,.obra.is-js .o-plan,.obra.is-js .o-slab,.obra.is-js .o-frame,.obra.is-js .o-walls,.obra.is-js .o-roof,.obra.is-js .o-finish,.obra.is-js .o-garden,.obra.is-js .o-keys{opacity:0}
.obra.is-js .o-pin{transform:translateY(-40px)}
.obra.is-js .o-slab{transform:scaleY(0);transform-origin:50% 100%}
.obra.is-js .o-frame .o-post{transform:scaleY(0);transform-origin:50% 100%;transition:transform .7s cubic-bezier(.2,.8,.2,1)}
.obra.is-js .o-frame .o-beam{transform:scaleX(0);transform-origin:0 50%;transition:transform .7s .5s ease}
.obra.is-js .o-walls .o-plank{transform:scaleX(0);transform-origin:0 50%;transition:transform .5s ease}
.obra.is-js .o-roof{transform:translateY(-120px)}
.obra.is-js .o-plan path,.obra.is-js .o-plan rect{stroke-dasharray:900;stroke-dashoffset:900;transition:stroke-dashoffset 1.6s ease}
.obra.is-js .o-finish{transform:scale(.96);transform-origin:50% 100%}
.obra.is-js .o-garden{transform:scale(.4);transform-origin:50% 100%}
.obra.is-js .o-keys{transform:translateY(16px) scale(.8)}
.obra.is-js .o-truck{transform:translateX(-260px);transition:transform 1.6s cubic-bezier(.45,.05,.3,1)}
.obra.is-js .o-wheel{transform-origin:50% 50%}

/* Etapa 1 — terreno */
.on-1 .o-pin{opacity:1!important;transform:none!important}
.on-1 .o-stakes{opacity:1!important}
/* Etapa 2 — projeto */
.on-2 .o-plan{opacity:1!important}
.on-2 .o-pin{opacity:0!important;transform:translateY(-20px)!important}
.on-2 .o-plan path,.on-2 .o-plan rect{stroke-dashoffset:0!important}
/* Etapa 3 — fundação */
.on-3 .o-slab{opacity:1!important;transform:none!important}
.on-3 .o-stakes,.on-3 .o-pin{opacity:0!important}
.on-3 .o-truck{transform:translateX(0)!important}
.on-3 .o-wheel{animation:obraSpin 1.6s linear 1}
/* Etapa 4 — estrutura */
.on-4 .o-frame{opacity:1!important}
.on-4 .o-frame .o-post,.on-4 .o-frame .o-beam{transform:none!important}
.on-4 .o-frame .o-post:nth-child(2){transition-delay:.1s}.on-4 .o-frame .o-post:nth-child(3){transition-delay:.2s}.on-4 .o-frame .o-post:nth-child(4){transition-delay:.3s}.on-4 .o-frame .o-post:nth-child(5){transition-delay:.4s}
/* Etapa 5 — paredes e telhado */
.on-5 .o-walls{opacity:1!important}
.on-5 .o-walls .o-plank{transform:none!important}
.on-5 .o-roof{opacity:1!important;transform:none!important;transition-delay:.9s}
.on-5 .o-plan{opacity:0!important}
/* Etapa 6 — acabamento e entrega */
.on-6 .o-finish,.on-6 .o-garden{opacity:1!important;transform:none!important}
.on-6 .o-keys{opacity:1!important;transform:none!important;transition-delay:.8s}
.on-6 .o-truck{transform:translateX(720px)!important}
.on-6 .o-wheel{animation:obraSpin 1.6s linear 1}
.on-6 .o-light{animation:obraGlow 2.4s ease-in-out .6s infinite alternate}
@keyframes obraSpin{to{transform:rotate(720deg)}}
@keyframes obraGlow{from{opacity:.55}to{opacity:1}}

/* Responsivo */
@media(max-width:1000px){.obra-grid{grid-template-columns:1fr;gap:30px}}
@media(max-width:760px){.obra{padding:50px 0}.obra-badge{top:10px;left:10px;font-size:10px;padding:7px 9px}.obra-controls{position:static;justify-content:flex-end;padding:8px;background:#fff;border-top:1px solid var(--o-line)}.obra-controls button{padding:7px 9px}.obra-step button{grid-template-columns:36px 1fr;padding:12px 2px}}

/* Movimento reduzido: cena final estática, sem autoplay */
@media(prefers-reduced-motion:reduce){.obra *,.obra *:after{animation:none!important;transition:none!important}}

/* Sem JS: mostra a casa pronta, sem elementos de obra */
.obra:not(.is-js) .o-pin,.obra:not(.is-js) .o-stakes,.obra:not(.is-js) .o-plan,.obra:not(.is-js) .o-truck,.obra:not(.is-js) .obra-controls{display:none}