/* ==========================================================================
   Pré-fabricados de concreto — estilos exclusivos da página (11/2026)
   Depende de: css/lcs-ui.css (padrão compartilhado, tokens --lcs-*).
   Conteúdo: desenhos técnicos em SVG (.pf-frame) e as interações da página.
   ========================================================================== */
.pf {
    --pf-concrete: #c9cfd8;
    --pf-concrete-dark: #8b97a8;
    --pf-steel-line: #5580b8;
}
.pf-hero__draw { margin: 0; }

/* Desenho técnico (comum) */
.pf-frame { display: block; width: 100%; height: auto; overflow: visible; }
.pf-frame .p-solid { fill: var(--pf-concrete); stroke: var(--pf-concrete-dark); stroke-width: 2; stroke-linejoin: round; }
.pf-frame .p-graute rect { fill: #a7b1bf; }
.pf-frame .p-pad { fill: #4b5563; }
.pf-frame .p-ground-line { stroke: #8b97a8; stroke-width: 2.5; }
.pf-frame .p-hatch { stroke: #c3cad4; stroke-width: 1.5; }
/* Referência de cobertura (terças/telhas): só contorno tracejado, não é produto em destaque */
.pf-frame .p-ref-item { fill: none; stroke: #9aa5b5; stroke-width: 1.5; stroke-dasharray: 4 3; }
.pf-frame .p-telha-line { fill: none; stroke: var(--lcs-red); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; opacity: 0.75; }
.pf-frame .p-chord { fill: none; stroke: var(--pf-steel-line); stroke-width: 7; stroke-linecap: round; stroke-linejoin: round; }
.pf-frame .p-web { fill: none; stroke: var(--pf-steel-line); stroke-width: 3.5; stroke-linejoin: round; }
.pf-frame .p-seat { fill: var(--pf-steel-line); }
.pf-frame .p-callout { font-size: 22px; font-weight: 700; fill: #fff; paint-order: stroke; stroke: rgba(15, 29, 51, 0.85); stroke-width: 6px; opacity: 0; transition: opacity 0.3s; pointer-events: none; }
.pf-frame .p-callout.is-on { opacity: 1; }

/* Desenho sobre fundo escuro */
.lcs-stage--dark .p-solid { fill: #3a4d6b; stroke: #8ea3c2; }
.lcs-stage--dark .p-graute rect { fill: #6c7f9c; }
.lcs-stage--dark .p-pad { fill: #c9d4e3; }
.lcs-stage--dark .p-ground-line { stroke: #6f86a6; }
.lcs-stage--dark .p-hatch { stroke: rgba(255, 255, 255, 0.12); }
.lcs-stage--dark .p-ref-item { stroke: #6f86a6; }
.lcs-stage--dark .p-telha-line { stroke: #e08b8b; }
.lcs-stage--dark .p-chord, .lcs-stage--dark .p-web { stroke: #7fb0ec; }
.lcs-stage--dark .p-seat { fill: #7fb0ec; }

/* Abertura: linhas brancas desenhadas em sequência */
.pf-frame--hero .p-solid { fill: rgba(255, 255, 255, 0.05); stroke: #dbe5f2; stroke-width: 2.2; }
.pf-frame--hero .p-graute rect { fill: rgba(240, 180, 180, 0.35); }
.pf-frame--hero .p-pad { fill: #f0b4b4; }
.pf-frame--hero .p-ground-line { stroke: rgba(255, 255, 255, 0.5); }
.pf-frame--hero .p-hatch { stroke: rgba(255, 255, 255, 0.18); }
.pf-frame--hero .p-ref-item { stroke: rgba(255, 255, 255, 0.35); }
.pf-frame--hero .p-telha-line { stroke: #f0b4b4; }
.pf-frame--hero.is-armed .p-d { stroke-dasharray: 1; stroke-dashoffset: 1; fill-opacity: 0; }
.pf-frame--hero.is-armed .p-ref-item { stroke-dasharray: 1; }
/* .p-d = elementos com pathLength, marcados pelo JS (seletor de classe garante o recálculo de estilo) */
.pf-frame--hero.is-ready .p-d {
    animation-name: lcs-draw, pf-fill;
    animation-duration: 0.9s, 0.6s;
    animation-timing-function: var(--lcs-ease), ease;
    animation-fill-mode: forwards, forwards;
    animation-delay: calc(var(--d, 0) * 1ms), calc(var(--d, 0) * 1ms + 500ms);
}
@keyframes pf-fill { to { fill-opacity: 1; } }

/* Explorador de elementos */
.pf-explorer { display: grid; grid-template-columns: 1.35fr 1fr; gap: 28px; align-items: start; }
.pf-frame--explorer g[data-part] { cursor: pointer; }
.pf-frame--explorer g[data-part] * { transition: fill 0.3s, stroke 0.3s, opacity 0.3s; }
.pf-frame--explorer.has-focus g[data-part]:not(.is-on) { opacity: 0.35; }
.pf-frame--explorer.has-focus .p-ref { opacity: 0.35; }
.pf-frame--explorer g[data-part="fund"].is-on .p-solid { fill: #8a6fb8; stroke: #c9a7f0; }
.pf-frame--explorer g[data-part="pilar"].is-on .p-solid { fill: #2f6fb5; stroke: #7fb0ec; }
.pf-frame--explorer g[data-part="viga"].is-on .p-solid { fill: #b04848; stroke: #e08b8b; }
.pf-frame--explorer g[data-part="lig"].is-on .p-solid { fill: #c99a3a; stroke: #f2c46d; }
.pf-frame--explorer g[data-part="lig"].is-on rect { fill: #f2c46d; }
.pf-dot--fund { color: #c9a7f0; }
.pf-dot--pilar { color: #7fb0ec; }
.pf-dot--viga { color: #e08b8b; }
.pf-dot--lig { color: #f2c46d; }

/* Montagem */
.pf-frame--assembly .p-step { transition: opacity 0.6s var(--lcs-ease), transform 0.8s var(--lcs-ease); }
.pf-frame--assembly .p-step.is-off { opacity: 0; transform: translateY(-120px); }
.pf-frame--assembly .p-step.is-new .p-solid { fill: #9fb6d6; stroke: var(--lcs-blue); }
.pf-frame--assembly .p-cable { stroke: #344054; stroke-width: 2; stroke-dasharray: 6 5; opacity: 0; }
.pf-frame--assembly .p-cable.is-on { animation: pf-cable 1.4s var(--lcs-ease) forwards; }
@keyframes pf-cable { 0% { opacity: 0; } 15% { opacity: 1; } 70% { opacity: 1; } 100% { opacity: 0; } }
.pf-assembly__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; margin: 18px 0 10px; }
.pf-assembly__controls { display: flex; align-items: center; gap: 10px; }
.pf-assembly__play { min-width: 140px; min-height: 48px; padding: 10px 22px; }
.pf-assembly__dots { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.pf-assembly__dots button {
    min-height: 40px; padding: 8px 12px; border-radius: 999px; border: 1px solid var(--lcs-line) !important;
    background: #fff; font-size: 13px; font-weight: 600; color: var(--lcs-muted); cursor: pointer;
    transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}
.pf-assembly__dots button.is-done { color: var(--lcs-blue-dark); border-color: var(--lcs-blue-light) !important; }
.pf-assembly__dots button.is-current { background: var(--lcs-blue); color: #fff; border-color: var(--lcs-blue) !important; }
.pf-assembly__text { min-height: 96px; padding: 18px 22px; border-radius: var(--lcs-radius); background: var(--lcs-soft); border-left: 3px solid var(--lcs-red) !important; }
.pf-assembly__text h3 { margin: 0 0 6px; font-size: 19px; color: var(--lcs-ink); }
.pf-assembly__text p { margin: 0; color: var(--lcs-text); }

/* Caminho das cargas */
.pf-forces .lcs-seg { margin-bottom: 16px; }
.pf-frame--forces .p-mode { opacity: 0; transition: opacity 0.4s; pointer-events: none; }
.pf-frame--forces[data-mode="vertical"] .p-mode--vertical,
.pf-frame--forces[data-mode="vento"] .p-mode--vento { opacity: 1; }
.pf-frame--forces .p-load line { stroke: var(--lcs-red); stroke-width: 3.5; }
.pf-frame--forces .p-load path { fill: var(--lcs-red); }
.pf-frame--forces .p-react line { stroke: var(--lcs-blue); stroke-width: 3.5; }
.pf-frame--forces .p-react path { fill: var(--lcs-blue); }
.pf-frame--forces .p-flow { fill: none; stroke: var(--lcs-blue); stroke-width: 5; stroke-linecap: round; stroke-dasharray: 10 14; animation: pf-flow 1.2s linear infinite; }
.pf-frame--forces .p-moment { fill: none; stroke: var(--lcs-blue); stroke-width: 3.5; stroke-dasharray: 7 6; }
@keyframes pf-flow { to { stroke-dashoffset: -24; } }
.pf-frame--forces .p-sup { transform-box: view-box; transform-origin: 0 450px; transition: transform 0.9s var(--lcs-ease); }
.pf-frame--forces[data-mode="vento"] .p-sup { transform: skewX(-4deg); }

/* Soluções mistas */
.pf-frame--mixed .p-roof { transition: opacity 0.5s var(--lcs-ease), transform 0.7s var(--lcs-ease); }
.pf-frame--mixed[data-roof="concreto"] .p-roof--metalica,
.pf-frame--mixed[data-roof="metalica"] .p-roof--concreto { opacity: 0; transform: translateY(-60px); pointer-events: none; }

/* Fundo da chamada final */
.pf-cta__bg { position: absolute; inset: auto -5% -10% -5%; width: 110%; height: 70%; z-index: -1; opacity: 0.08; }
.pf-cta__bg .p-solid { fill: none; stroke: #fff; }
.pf-cta__bg .p-telha-line, .pf-cta__bg .p-ground-line, .pf-cta__bg .p-hatch, .pf-cta__bg .p-ref-item { stroke: #fff; }
.pf-cta__bg .p-graute rect, .pf-cta__bg .p-pad { fill: #fff; }

@media (max-width: 1080px) {
    .pf-explorer { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
    .pf-hero__draw { max-width: 640px; }
}
@media (max-width: 640px) {
    /* o desenho fica ~0,28x no celular: 44 unidades ≈ 12 px na tela */
    .pf-frame .p-callout { font-size: 44px; stroke-width: 9px; }
    .pf-assembly__bar { flex-direction: column; align-items: stretch; }
    .pf-assembly__controls, .pf-assembly__dots { justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
    .pf-frame--forces .p-flow { animation: none !important; }
    .pf-frame--hero .p-d { stroke-dashoffset: 0 !important; fill-opacity: 1 !important; }
}
@media print {
    .pf-hero__draw, .pf-cta__bg { display: none !important; }
}