/* ==========================================================================
   Mezanino — 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 (.mz-frame) e as interações da página.
   ========================================================================== */
.mz {
    --mz-steel: #c5d3e6;
    --mz-steel-line: #4f72a3;
}
.mz-hero__draw { margin: 0; }
/* foto ilustrativa de 800 px: sombreamento um pouco mais forte para não evidenciar a resolução */
.mz-hero__shade { background: linear-gradient(90deg, rgba(15, 29, 51, 0.95) 0%, rgba(15, 29, 51, 0.85) 50%, rgba(15, 29, 51, 0.6) 100%), linear-gradient(0deg, rgba(15, 29, 51, 0.95) 0%, rgba(15, 29, 51, 0) 45%); }

/* Desenho técnico (comum) */
.mz-frame { display: block; width: 100%; height: auto; overflow: visible; }
.mz-frame .z-steel { fill: var(--mz-steel); stroke: var(--mz-steel-line); stroke-width: 2; stroke-linejoin: round; }
.mz-frame .z-deck { fill: #9aa5b5; }
.mz-frame .z-bolt { stroke: #344054; stroke-width: 3; }
.mz-frame .z-boltdot { fill: #344054; }
.mz-frame .z-x { stroke: var(--mz-steel-line); stroke-width: 4; }
.mz-frame .z-rail { stroke: #f2a33a; stroke-width: 3; fill: none; }
.mz-frame .z-rail--mid { stroke-width: 2; }
.mz-frame .z-stair { stroke: #8b97a8; stroke-width: 3; fill: none; }
.mz-frame .z-ground-line { stroke: #8b97a8; stroke-width: 2.5; }
.mz-frame .z-hatch { stroke: #c3cad4; stroke-width: 1.5; }
.mz-frame .z-tag { font-size: 16px; font-weight: 700; letter-spacing: 0.14em; fill: #8b97a8; }
.mz-frame .z-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; }
.mz-frame .z-callout.is-on { opacity: 1; }
.mz-frame .z-plan-bg { fill: rgba(255, 255, 255, 0.04); stroke: rgba(255, 255, 255, 0.18); }
.mz-frame .z-plan-label { font-size: 16px; font-weight: 600; fill: #8ea3c2; letter-spacing: 0.06em; }
.mz-frame .z-plan-vp { stroke: #8ea3c2; stroke-width: 6; }
.mz-frame .z-plan-vs { stroke: #8ea3c2; stroke-width: 2; }
.mz-frame .z-plan-col { fill: #c9d4e3; }

/* Sobre fundo escuro */
.lcs-stage--dark .z-steel { fill: #3a4d6b; stroke: #8ea3c2; }
.lcs-stage--dark .z-deck { fill: #5d7290; }
.lcs-stage--dark .z-bolt { stroke: #c9d4e3; }
.lcs-stage--dark .z-boltdot { fill: #c9d4e3; }
.lcs-stage--dark .z-x { stroke: #8ea3c2; }
.lcs-stage--dark .z-stair { stroke: #6f86a6; }
.lcs-stage--dark .z-ground-line { stroke: #6f86a6; }
.lcs-stage--dark .z-hatch { stroke: rgba(255, 255, 255, 0.12); }

/* Abertura (classe .z-d marcada pelo JS) */
.mz-frame--hero .z-steel { fill: rgba(255, 255, 255, 0.05); stroke: #dbe5f2; stroke-width: 2.2; }
.mz-frame--hero .z-deck { fill: rgba(255, 255, 255, 0.25); }
.mz-frame--hero .z-x, .mz-frame--hero .z-stair { stroke: #dbe5f2; }
.mz-frame--hero .z-bolt { stroke: #f0b4b4; }
.mz-frame--hero .z-boltdot { fill: #f0b4b4; }
.mz-frame--hero .z-rail { stroke: #f0b4b4; }
.mz-frame--hero .z-ground-line { stroke: rgba(255, 255, 255, 0.5); }
.mz-frame--hero .z-hatch { stroke: rgba(255, 255, 255, 0.18); }
.mz-frame--hero .z-tag { fill: rgba(255, 255, 255, 0.45); }
.mz-frame--hero.is-armed .z-d { stroke-dasharray: 1; stroke-dashoffset: 1; fill-opacity: 0; }
.mz-frame--hero.is-ready .z-d {
    animation-name: lcs-draw, mz-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 mz-fill { to { fill-opacity: 1; } }

/* Explorador */
.mz-explorer { display: grid; grid-template-columns: 1.35fr 1fr; gap: 28px; align-items: start; }
.mz-frame--explorer g[data-part] { cursor: pointer; }
.mz-frame--explorer g[data-part] * { transition: fill 0.3s, stroke 0.3s, opacity 0.3s; }
.mz-frame--explorer.has-focus g[data-part]:not(.is-on) { opacity: 0.3; }
.mz-frame--explorer.has-focus .z-ref { opacity: 0.3; }
.mz-frame--explorer g[data-part="pilar"].is-on .z-steel, .mz-frame--explorer g[data-part="pilar"].is-on .z-plan-col { fill: #2f6fb5; stroke: #7fb0ec; }
.mz-frame--explorer g[data-part="vp"].is-on .z-steel { fill: #b04848; stroke: #e08b8b; }
.mz-frame--explorer g[data-part="vp"].is-on .z-plan-vp { stroke: #e08b8b; }
.mz-frame--explorer g[data-part="vs"].is-on .z-steel { fill: #c99a3a; stroke: #f2c46d; }
.mz-frame--explorer g[data-part="vs"].is-on .z-plan-vs { stroke: #f2c46d; stroke-width: 3; }
.mz-frame--explorer g[data-part="contra"].is-on .z-x { stroke: #7fd3b8; stroke-width: 6; }
.mz-frame--explorer g[data-part="piso"].is-on .z-steel { fill: #8a6fb8; stroke: #c9a7f0; }
.mz-frame--explorer g[data-part="lig"].is-on .z-steel { fill: #f2c46d; stroke: #fff; }
.mz-frame--explorer g[data-part="lig"].is-on .z-bolt { stroke: #fff; }
.mz-dot--pilar { color: #7fb0ec; }
.mz-dot--vp { color: #e08b8b; }
.mz-dot--vs { color: #f2c46d; }
.mz-dot--contra { color: #7fd3b8; }
.mz-dot--piso { color: #c9a7f0; }
.mz-dot--lig { color: #fff; }

/* Pisos */
.mz-floors .lcs-seg { margin-bottom: 16px; }
.mz-frame--floors .z-floor { transition: opacity 0.4s var(--lcs-ease), transform 0.5s var(--lcs-ease); }
.mz-frame--floors:not([data-floor="deck"]) .z-floor--deck,
.mz-frame--floors:not([data-floor="chapa"]) .z-floor--chapa,
.mz-frame--floors:not([data-floor="grade"]) .z-floor--grade,
.mz-frame--floors:not([data-floor="painel"]) .z-floor--painel { opacity: 0; transform: translateY(-30px); }
.mz-frame .z-concrete { fill: #d9dee5; stroke: #9aa5b5; stroke-width: 1.5; }
.mz-frame .z-deck-line { fill: none; stroke: var(--mz-steel-line); stroke-width: 4; stroke-linejoin: round; }
.mz-frame .z-mesh { stroke: #932d2d; stroke-width: 2; stroke-dasharray: 10 8; }
.mz-frame .z-plate { fill: #9fb6d6; stroke: var(--mz-steel-line); stroke-width: 2; }
.mz-frame .z-grip { stroke: var(--mz-steel-line); stroke-width: 2; }
.mz-frame .z-grate { stroke: var(--mz-steel-line); stroke-width: 4; }
.mz-frame .z-grate--bar { stroke-width: 2.5; }
.mz-frame .z-panel { fill: #e6d3b3; stroke: #a57f45; stroke-width: 2; }
.mz-frame .z-finish { fill: #8b97a8; }

/* Montagem */
.mz-frame--assembly .z-step { transition: opacity 0.6s var(--lcs-ease), transform 0.8s var(--lcs-ease); }
.mz-frame--assembly .z-step.is-off { opacity: 0; transform: translateY(-110px); }
.mz-frame--assembly .z-step.is-new .z-steel { fill: #9fb6d6; stroke: var(--lcs-blue); }
.mz-assembly__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; margin: 18px 0 10px; }
.mz-assembly__controls { display: flex; align-items: center; gap: 10px; }
.mz-assembly__play { min-width: 140px; min-height: 48px; padding: 10px 22px; }
.mz-assembly__dots { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.mz-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;
}
.mz-assembly__dots button.is-done { color: var(--lcs-blue-dark); border-color: var(--lcs-blue-light) !important; }
.mz-assembly__dots button.is-current { background: var(--lcs-blue); color: #fff; border-color: var(--lcs-blue) !important; }
.mz-assembly__text { min-height: 96px; padding: 18px 22px; border-radius: var(--lcs-radius); background: #fff; border-left: 3px solid var(--lcs-red) !important; }
.mz-assembly__text h3 { margin: 0 0 6px; font-size: 19px; color: var(--lcs-ink); }
.mz-assembly__text p { margin: 0; color: var(--lcs-text); }

/* Projeto por uso */
.mz-use__panel { padding: clamp(20px, 3vw, 32px); border-radius: 16px; background: var(--lcs-blue-soft); }
.mz-use__list { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 28px; margin: 0; padding: 0; list-style: none; }
.mz-use__list li { position: relative; padding-left: 30px; font-weight: 600; color: var(--lcs-blue-dark); animation: lcs-fade 0.35s var(--lcs-ease); }
.mz-use__list li::before { content: ""; position: absolute; left: 4px; top: 8px; width: 13px; height: 7px; border-left: 3px solid var(--lcs-red); border-bottom: 3px solid var(--lcs-red); transform: rotate(-45deg); }

/* Linha do tempo com 6 etapas */
.mz-timeline { grid-template-columns: repeat(6, 1fr); }

/* Link abaixo da galeria em seção clara (no lcs-ui ele é branco, pensado para fundo escuro) */
.mz .lcs-section:not(.lcs-section--dark) .lcs-gallery__more a { color: var(--lcs-blue-dark); }

/* Fundo da chamada final */
.mz-cta__bg { position: absolute; inset: auto -5% -10% -5%; width: 110%; height: 70%; z-index: -1; opacity: 0.08; }
.mz-cta__bg .z-steel, .mz-cta__bg .z-deck { fill: none; stroke: #fff; }
.mz-cta__bg .z-x, .mz-cta__bg .z-rail, .mz-cta__bg .z-stair, .mz-cta__bg .z-ground-line, .mz-cta__bg .z-hatch, .mz-cta__bg .z-bolt { stroke: #fff; }
.mz-cta__bg .z-tag, .mz-cta__bg .z-boltdot { fill: #fff; }

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