/* ==========================================================================
   Galpões industriais — 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 (.gi-frame) e as interações da página.
   ========================================================================== */
.gi {
    --gi-steel: #c5d3e6;
    --gi-steel-line: #4f72a3;
    --gi-concrete: #d9dee5;
}
.gi-hero__draw { margin: 0; }

/* Desenho técnico (comum) */
.gi-frame { display: block; width: 100%; height: auto; overflow: visible; }
.gi-frame .g-steel { fill: var(--gi-steel); stroke: var(--gi-steel-line); stroke-width: 2; stroke-linejoin: round; }
.gi-frame .g-block { fill: var(--gi-concrete); stroke: #9aa5b5; stroke-width: 1.5; }
.gi-frame .g-bolt { stroke: #344054; stroke-width: 3; }
.gi-frame .g-chord { fill: none; stroke: var(--gi-steel-line); stroke-width: 8; stroke-linecap: round; stroke-linejoin: round; }
.gi-frame .g-chord--thin { stroke-width: 6; }
.gi-frame .g-web { fill: none; stroke: var(--gi-steel-line); stroke-width: 3.5; stroke-linejoin: round; }
.gi-frame .g-web--thin { stroke-width: 2.5; }
.gi-frame .g-telha { fill: none; stroke: var(--lcs-red); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; opacity: 0.7; }
.gi-frame .g-ref-line { stroke: #9aa5b5; stroke-width: 2; stroke-dasharray: 6 5; }
.gi-frame .g-ground-line { stroke: #8b97a8; stroke-width: 2.5; }
.gi-frame .g-hatch { stroke: #c3cad4; stroke-width: 1.5; }
.gi-frame .g-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; }
.gi-frame .g-callout.is-on { opacity: 1; }

/* Desenho sobre fundo escuro */
.lcs-stage--dark .g-steel { fill: #3a4d6b; stroke: #8ea3c2; }
.lcs-stage--dark .g-block { fill: #26344d; stroke: #5d7290; }
.lcs-stage--dark .g-bolt { stroke: #c9d4e3; }
.lcs-stage--dark .g-chord, .lcs-stage--dark .g-web { stroke: #8ea3c2; }
.lcs-stage--dark .g-telha { stroke: #e08b8b; }
.lcs-stage--dark .g-ref-line { stroke: #5d7290; }
.lcs-stage--dark .g-ground-line { stroke: #6f86a6; }
.lcs-stage--dark .g-hatch { stroke: rgba(255, 255, 255, 0.12); }

/* Abertura: linhas brancas desenhadas em sequência (classe .g-d marcada pelo JS) */
.gi-frame--hero .g-steel, .gi-frame--hero .g-block { fill: rgba(255, 255, 255, 0.05); stroke: #dbe5f2; stroke-width: 2.2; }
.gi-frame--hero .g-chord, .gi-frame--hero .g-web { stroke: #dbe5f2; }
.gi-frame--hero .g-bolt { stroke: #f0b4b4; }
.gi-frame--hero .g-telha { stroke: #f0b4b4; }
.gi-frame--hero .g-ref-line { stroke: rgba(255, 255, 255, 0.35); }
.gi-frame--hero .g-ground-line { stroke: rgba(255, 255, 255, 0.5); }
.gi-frame--hero .g-hatch { stroke: rgba(255, 255, 255, 0.18); }
.gi-frame--hero.is-armed .g-d { stroke-dasharray: 1; stroke-dashoffset: 1; fill-opacity: 0; }
.gi-frame--hero.is-ready .g-d {
    animation-name: lcs-draw, gi-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);
}
.gi-frame--hero.is-armed .g-ref-line.g-d { stroke-dasharray: 1; }
@keyframes gi-fill { to { fill-opacity: 1; } }

/* Explorador */
.gi-explorer { display: grid; grid-template-columns: 1.35fr 1fr; gap: 28px; align-items: start; }
.gi-frame--explorer g[data-part] { cursor: pointer; }
.gi-frame--explorer g[data-part] * { transition: fill 0.3s, stroke 0.3s, opacity 0.3s; }
.gi-frame--explorer.has-focus g[data-part]:not(.is-on) { opacity: 0.35; }
.gi-frame--explorer.has-focus .g-ref { opacity: 0.35; }
.gi-frame--explorer g[data-part="pilar"].is-on .g-steel { fill: #2f6fb5; stroke: #7fb0ec; }
.gi-frame--explorer g[data-part="viga"].is-on .g-steel { fill: #b04848; stroke: #e08b8b; }
.gi-frame--explorer g[data-part="terca"].is-on .g-steel { fill: #c99a3a; stroke: #f2c46d; }
.gi-frame--explorer g[data-part="base"].is-on .g-steel,
.gi-frame--explorer g[data-part="base"].is-on .g-block { fill: #8a6fb8; stroke: #c9a7f0; }
.gi-frame--explorer g[data-part="base"].is-on .g-bolt { stroke: #fff; }
.gi-frame .g-side-bg { fill: rgba(255, 255, 255, 0.04); stroke: rgba(255, 255, 255, 0.18); }
.gi-frame .g-side-label { font-size: 18px; font-weight: 600; fill: #8ea3c2; letter-spacing: 0.06em; }
.gi-frame .g-side-col { stroke: #8ea3c2; stroke-width: 5; }
.gi-frame .g-x { stroke: #7fd3b8; stroke-width: 3; }
.gi-frame--explorer g[data-part="contra"].is-on .g-x { stroke: #7fd3b8; stroke-width: 5; }
.gi-dot--base { color: #c9a7f0; }
.gi-dot--pilar { color: #7fb0ec; }
.gi-dot--viga { color: #e08b8b; }
.gi-dot--terca { color: #f2c46d; }
.gi-dot--contra { color: #7fd3b8; }

/* Sistemas de cobertura */
.gi-roofs .lcs-seg { margin-bottom: 16px; }
.gi-frame--roofs .g-roof { transition: opacity 0.45s var(--lcs-ease); }
.gi-frame--roofs:not([data-roof="alma"]) .g-roof--alma,
.gi-frame--roofs:not([data-roof="trelica"]) .g-roof--trelica,
.gi-frame--roofs:not([data-roof="joist"]) .g-roof--joist { opacity: 0; pointer-events: none; }

/* Ampliações */
.gi-expand .lcs-seg { margin-bottom: 16px; }
.gi-frame--expand .g-new { transition: opacity 0.6s var(--lcs-ease), transform 0.9s var(--lcs-ease); }
.gi-frame--expand[data-state="existente"] .g-new { opacity: 0; transform: translateX(120px); }
.gi-frame--expand .g-new .g-steel { fill: #2f6fb5; stroke: #7fb0ec; }
.gi-frame--expand .g-new .g-chord, .gi-frame--expand .g-new .g-web { stroke: #7fb0ec; }
.gi-frame--expand .g-ring { fill: none; stroke: #f2c46d; stroke-width: 4; stroke-dasharray: 8 6; }
.gi-frame .g-tag { font-size: 18px; font-weight: 700; letter-spacing: 0.14em; fill: #8ea3c2; }
.gi-frame .g-tag--new { fill: #7fb0ec; }
.gi-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin: 0; padding: 0; list-style: none; counter-reset: gi; }
.gi-steps li { counter-increment: gi; position: relative; padding: 48px 20px 20px; border-radius: var(--lcs-radius); background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.1) !important; color: #c9d4e3; font-size: 15px; }
.gi-steps li::before { content: counter(gi, decimal-leading-zero); position: absolute; top: 16px; left: 20px; font-size: 13px; font-weight: 700; letter-spacing: 0.1em; color: #f0b4b4; }
.gi-steps strong { display: block; margin-bottom: 6px; font-size: 16px; color: #fff; }

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

/* Fundo da chamada final */
.gi-cta__bg { position: absolute; inset: auto -5% -10% -5%; width: 110%; height: 70%; z-index: -1; opacity: 0.08; }
.gi-cta__bg .g-steel, .gi-cta__bg .g-block { fill: none; stroke: #fff; }
.gi-cta__bg .g-chord, .gi-cta__bg .g-web, .gi-cta__bg .g-telha, .gi-cta__bg .g-ground-line, .gi-cta__bg .g-hatch, .gi-cta__bg .g-bolt, .gi-cta__bg .g-ref-line { stroke: #fff; }

@media (max-width: 1080px) {
    .gi-explorer { grid-template-columns: 1fr; }
    .gi-steps { grid-template-columns: 1fr 1fr; }
    .gi-timeline { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
    .gi-hero__draw { max-width: 640px; }
}
@media (max-width: 640px) {
    /* o desenho fica ~0,28x no celular: 44 unidades ≈ 12 px na tela */
    .gi-frame .g-callout { font-size: 44px; stroke-width: 9px; }
    .gi-frame .g-side-label, .gi-frame .g-tag { font-size: 32px; }
    .gi-steps { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
    .gi-frame--hero .g-d { stroke-dashoffset: 0 !important; fill-opacity: 1 !important; }
}
@media print {
    .gi-hero__draw, .gi-cta__bg { display: none !important; }
}

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