/* ============================================================================
   MDC — Proporção das fotos (proporcao.css)
   ----------------------------------------------------------------------------
   O QUE ISTO CONSERTA

   Toda caixa de foto do site tinha ALTURA FIXA em pixels, com object-fit:cover.
   Quando a proporção da caixa não batia com a do arquivo, o navegador
   descartava a diferença em silêncio. Uma varredura em 17/09/2026 encontrou
   31 lugares com 25% a 67% da foto jogados fora — o pior era a faixa do CMAG,
   com 67%, e os cartões de modelo do data center, com 44% a 46%: o contêiner
   aparecia sem topo e sem base.

   A REGRA AQUI: a caixa acompanha o arquivo, nunca o contrário.
   Na prática, `height: auto` — a imagem ocupa a largura disponível e a altura
   sai da própria proporção dela. Nada é cortado e nenhuma tarja aparece.

   O PREÇO, aceito pela cliente ("produto inteiro e nada cortado"): as seções
   com foto ficam mais altas e a página rola mais. Por isso várias delas
   deixaram de ser `tela-cheia` — ver o fim deste arquivo.

   ORDEM DE CARGA: depois do kit.css, do snap.css e do encaixe.css, que é quem
   fixava várias dessas alturas. Se este arquivo entrar antes, não adianta.
   ========================================================================== */

/* ─────────────────────────────────────────────────────────────────────────
   1. Cartões e galerias — imagem no fluxo normal
   A imagem vira um bloco comum: largura do contêiner, altura pela proporção.
   É o caso mais simples e o que resolve a maior parte dos 31.
   ───────────────────────────────────────────────────────────────────────── */
body > section .mcard-img,
body > section .mcard-img img,
body > section .gallery-item img,
body > section .gitem img,
body > section .rf-gal img,
body > section .vp-img img,
body > section .inside-img img,
body > section .about-img img,
body > section .hero-img-wrap img,
body > section .phero-img-wrap > img,
body > section .tec-img img,
body > section .ata-item-foto,
body > section .ata-item-foto img {
    height: auto !important;
    max-height: none !important;
    aspect-ratio: auto !important;
    object-fit: fill;          /* a caixa já tem a proporção certa: nada a cortar */
}

/* O .mcard-img era um flex centralizador com altura fixa; sem a altura ele
   volta a ser um bloco comum. */
body > section .mcard-img { display: block; }

/* ─────────────────────────────────────────────────────────────────────────
   2. Galerias em grade — linhas de alturas diferentes
   Com a altura livre, cada foto tem a sua. Alinhar pelo topo evita que a
   grade estique as menores para acompanhar a maior (o que voltaria a
   distorcer). O `align-items: start` é o que impede isso.
   ───────────────────────────────────────────────────────────────────────── */
body > section .gallery-grid,
body > section .rf-gal { align-items: start; grid-auto-rows: auto !important; }
body > section .gallery-grid .gitem,
body > section .gallery-grid .gallery-item { height: auto !important; }
/* o .gitem-main ocupava duas linhas contando com altura fixa */
body > section .gallery-grid .gitem-main { grid-row: auto !important; }

/* ─────────────────────────────────────────────────────────────────────────
   3. Faixas e carrosséis — imagem posicionada por cima da caixa
   Aqui a imagem é `position:absolute; inset:0`, então `height:auto` não tem
   efeito: quem manda é a caixa. A proporção vai nela.
   ───────────────────────────────────────────────────────────────────────── */

/* ─────────────────────────────────────────────────────────────────────────
   4. Seções que deixam de caber em uma tela
   Com a foto inteira, estas não cabem mais em 100svh — e forçar faria o
   sistema de encaixe encolher tudo, que é o problema de origem. Elas passam
   a ter altura livre. As seções só de texto continuam como estavam.
   ───────────────────────────────────────────────────────────────────────── */
body > section.tela-cheia.solta-altura {
    height: auto !important;
    min-height: 0 !important;
}

/* ─────────────────────────────────────────────────────────────────────────
   5. Heróis — precisam repetir o seletor do encaixe.css
   O encaixe fixa a altura com `body > section.phero .phero-img-wrap > img`.
   Um seletor mais curto perde para ele mesmo com !important, porque a classe
   `.phero` na seção pesa mais. Repetimos o seletor: empate de peso, e este
   arquivo carrega depois.
   ───────────────────────────────────────────────────────────────────────── */
body > section.phero .phero-img-wrap > img,
body > section.hero .hero-img-wrap > img,
body > section.phero .phero-img-wrap img,
body > section.hero .hero-img-wrap img {
    height: auto !important;
    max-height: none !important;
    object-fit: fill;
}

/* ─────────────────────────────────────────────────────────────────────────
   6. Carrosséis — uma caixa, vários arquivos
   Aqui não dá para a caixa seguir cada foto: a altura mudaria a cada slide e
   a página pularia embaixo. Então a caixa ganha UMA proporção e os arquivos
   que destoavam foram regravados nessa mesma proporção, com o enquadramento
   escolhido à mão (ver os arquivos terminados em -16x9 e -3x2). Assim o
   corte deixa de ser aleatório e vira decisão.
   ───────────────────────────────────────────────────────────────────────── */
body > section .hero-carousel {
    height: auto !important;
    aspect-ratio: 16 / 9;
}
body > section .rfcar {
    height: auto !important;
    aspect-ratio: 3 / 2;
}

/* ─────────────────────────────────────────────────────────────────────────
   7. Achados na segunda passada — só apareciam em tela menor
   Em 1920 estas caixas por acaso batiam com o arquivo; em 1366 e 1440 não.
   Por isso a varredura roda em três larguras, não em uma.
   ───────────────────────────────────────────────────────────────────────── */

/* Painéis de produto da home. A foto mora num .lp-par, que é `top:-10%;
   height:120%` para o efeito de paralaxe — ou seja, a caixa da imagem é 1,2×
   a altura do painel. Para a imagem (740x1110, proporção 0,667) não cortar,
   o painel precisa de proporção 0,8: 0,667 x 1,2. Cinco painéis lado a lado
   dão 4,0 na fileira.
   A proporção vai na FILEIRA porque o hover anima a largura dos painéis; no
   painel, a altura pularia a cada passada de mouse. */
body > section #lp-row-produtos {
    height: auto !important;
    aspect-ratio: 4 / 1;
}
body > section #lp-row-produtos .lp-panel { height: 100% !important; }

/* Visual do monitoramento e pôster do tour 3D: imagem no fluxo e imagem
   absoluta dentro do palco, respectivamente. */
body > section .mon-visual img { height: auto !important; max-height: none !important; }
body > section .tr-stage { aspect-ratio: 16 / 9; height: auto !important; }

/* ─────────────────────────────────────────────────────────────────────────
   8. O teto global de 58vh
   O encaixe.css punha `max-height: min(58vh, 620px)` em TODA <img> dentro de
   seção — era um freio para a imagem não estourar a seção. Com a caixa
   seguindo o arquivo, esse teto só atrapalha: ele corta a ALTURA sem mexer na
   largura, a proporção desencaixa e o object-fit:cover come a diferença.

   Foi o que deixava o pôster do tour 3D em 1150x445 dentro de um palco de
   1152x648 — a caixa estava certa, a imagem é que era espremida por dentro.
   ───────────────────────────────────────────────────────────────────────── */
body > section img { max-height: none; }

/* ─────────────────────────────────────────────────────────────────────────
   9. A faixa do CMAG
   É uma <section class="rf-band"> — seção, não elemento dentro de seção, por
   isso os seletores acima não a alcançavam.

   É textura de fundo atrás de uma frase, escurecida a 55%, não foto de
   produto: não há assunto a preservar. Ainda assim o arquivo foi regravado na
   proporção da faixa, para o corte deixar de existir também aqui.
   ───────────────────────────────────────────────────────────────────────── */
body > section.rf-band {
    height: auto !important;
    aspect-ratio: 1240 / 260;
    min-height: 220px;
}

/* ─────────────────────────────────────────────────────────────────────────
   10. Celular e tablet
   Abaixo de 1025px o encaixe nem roda, mas as páginas têm media queries
   próprias com altura fixa — e o problema reaparece por outro caminho. A
   varredura em 390px achou mais 13 lugares. Mesma regra: a caixa segue o
   arquivo.
   ───────────────────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
    body > section .lp-row,
    body > section #lp-row-produtos { aspect-ratio: auto !important; height: auto !important; }
    body > section .lp-panel { height: auto !important; }
    /* no celular o paralaxe já está desligado; sem ele o .lp-par não precisa
       mais ser uma camada absoluta de 120% de altura */
    body > section .lp-par {
        position: relative !important; top: 0 !important; height: auto !important;
        transform: none !important;
    }
    body > section .lp-par img,
    body > section .hero-image img,
    body > section .hero-image-pro img,
    body > section .rf-pan img,
    body > section .rf-panoramica img { height: auto !important; max-height: none !important; }
    body > section .tr-stage {
        aspect-ratio: 16 / 9 !important; height: auto !important; min-height: 0 !important;
    }
}

/* A panorâmica do parque da FVS (1870x841) tinha altura fixa de 320px no
   celular — 47% da fileira de módulos ia embora. Inteira, ela fica com 176px
   de altura numa tela de 390px, e a legenda sobreposta cobriria quase tudo.
   Então no celular a legenda desce para baixo da foto, em vez de deitar
   sobre ela. */
@media (max-width: 768px) {
    body > section#fvs-parque img { height: auto !important; }
    body > section.rf-faixa figcaption {
        position: static !important;
        background: rgba(6, 14, 28, .92);
        padding: 14px 16px 16px;
    }
}

/* ─────────────────────────────────────────────────────────────────────────
   11. O mapa de presença
   A seção tinha altura EXATA de uma tela, e o mapa ficava com o que sobrasse
   depois do cabeçalho e das três fileiras de filtros. Num notebook de 750px
   isso deixava o mapa com 705px de largura dentro de um container de 1200 —
   mais estreito que os próprios filtros acima dele, o que lê como espaço
   vago, não como decisão.

   Agora a seção pode crescer um pouco e o mapa ocupa a largura que tiver,
   com a altura saindo da proporção do desenho. O teto de 68vh segura a
   seção em ~1,3 tela, que é o limite que combinamos olhando a referência.

   A PROPORÇÃO É 1333/744 E ACOMPANHA O viewBox DO SVG.
   O viewBox era "91 36 1333 712", recortado rente ao conteúdo: Boa Vista,
   o ponto mais ao norte, ficava a 16 unidades da borda de cima — contra 38
   de Porto Velho na borda de baixo. Com a barra de filtros fora do mapa o
   ponto aparecia, mas encostado no topo, e continuava LENDO como cortado.
   Foi a queixa que voltou em 18/09.
   O viewBox passou a "91 4 1333 744": 48 unidades de céu acima de Boa
   Vista. O desenho tem geografia até y=-46, então o espaço novo é mapa de
   verdade, não tarja. Mexer num sem mexer no outro volta a cortar ou cria
   faixa escura nas laterais.
   ───────────────────────────────────────────────────────────────────────── */
body > section.presenca {
    height: auto !important;
    min-height: calc(100svh - var(--nav-h));
}
body > section.presenca .pr-mapwrap {
    flex: 0 0 auto !important;
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 1333 / 744;
    margin-inline: auto;
    /* O limite de altura é aplicado como limite de LARGURA, convertido pela
       proporção. Como `max-height` a caixa continuava com 1152px de largura e
       o desenho, que não pode distorcer, era centralizado dentro dela: numa
       tela de 1366x768 sobravam 81px de moldura escura de cada lado — a
       "coluna vazia" que já tinha sido reclamada antes. Como `max-width` a
       caixa inteira encolhe junto e não existe tarja nenhuma. */
    max-width: calc(min(72vh, 660px) * 1333 / 744);
    max-height: none !important;
}

/* ─────────────────────────────────────────────────────────────────────────
   12. Nada por cima do mapa            (reescrita em 18/09/2026)

   Aqui morava a solução anterior: as duas fileiras de filtros flutuavam
   sobre o desenho, com um botão no canto para recolhê-las. Ela devolvia
   altura ao mapa — medido, 870x465 para 1010x540 — e custou as duas
   queixas que chegaram da MDC em 17/09:

     · "o mapa interativo não abre completamente, então há cidades que não
       aparecem, por exemplo, infovia 04" (Cel. Lustosa, por e-mail).
       O .pr-bar flutuava, mas a linha das infovias entrava no fluxo DENTRO
       do .pr-mapwrap e empurrava o SVG para baixo. Com proporção fixa e
       overflow:hidden, o que é empurrado é cortado — e o que ficava de fora
       era o norte do mapa. A barra media 175px e cobria Boa Vista e
       Caracaraí, as duas de Roraima que são da Infovia 04.

     · "esse segundo clique aí do lado superior direito não é instintivo"
       (Dir. de Operações, por WhatsApp), sobre o botão de recolher.

   A altura que a flutuação economizava não valia esconder um estado inteiro.
   Os filtros voltaram para cima do mapa no FLUXO — fora da moldura — e o
   botão de recolher deixou de existir, porque não há mais o que recolher.
   A altura foi recuperada de outro jeito: escolher uma rota agora enquadra
   os pontos dela (assets/js/zoom.js, enquadra()), então o mapa não precisa
   mais mostrar tudo ao mesmo tempo para ser útil.
   ───────────────────────────────────────────────────────────────────────── */

/* A legenda das rotas fica no canto de BAIXO e à DIREITA.
   Em cima não pode: é onde o desenho tem Roraima e o Amapá. À esquerda
   também não: ali fica Porto Velho, que tem etiqueta fixa — ou seja, é
   desenhada sempre, mesmo em cima de outra coisa — e as duas se encavalavam.
   O canto de baixo à direita é Tocantins e Maranhão: nenhum ponto da MDC. */
body > section.presenca .pr-legend {
    top: auto !important; bottom: 14px;
    left: auto !important; right: 14px;
}

@media (max-width: 1024px) {
    /* No celular o .pr-mapwrap vira uma coluna flex (ver encaixe.css), e um
       filho sem `order` vai para o começo dela: a legenda aparecia ACIMA do
       desenho, tapando o norte do mapa. Vai para o fim da coluna. */
    body > section.presenca .pr-legend {
        position: static !important; order: 9; margin-top: 10px;
    }
}

/* ─────────────────────────────────────────────────────────────────────────
   13. O carrossel do cofre
   `#solucao .seg-carousel` tinha `height: clamp(340px,50vh,640px)` junto com
   `aspect-ratio: 3/4`. É o mesmo defeito da fileira de serviços: o teto de
   altura ENCOLHE A LARGURA para manter a proporção. Numa janela de 591px a
   foto ficava com 255px de largura ao lado de um bloco de cartões de 700px —
   proporção correta, equilíbrio nenhum.

   Agora a foto ocupa a coluna dela e a altura sai da proporção do arquivo
   (900x1200). Os cartões ficam mais compactos para a cena continuar cabendo.
   ───────────────────────────────────────────────────────────────────────── */
body > section#solucao .seg-carousel,
body > section#solucao .seg-slides,
body > section#solucao .seg-slide {
    height: auto !important;
    max-height: none !important;
}
body > section#solucao .seg-carousel { aspect-ratio: 3 / 4; width: 100%; }
body > section#solucao .seg-slide img { height: 100% !important; object-fit: cover; }

/* cartões mais compactos, para a foto poder crescer sem estourar a cena */
body > section#solucao .solution-list { gap: clamp(8px, 1.2vh, 16px) !important; }
body > section#solucao .solution-item p { line-height: 1.45; }
body > section#solucao .solution-grid { align-items: center; }

/* Os cartões do cofre em duas colunas já a partir de 1100px de altura (antes
   era só abaixo de 850px). São oito itens: numa coluna só a cena passa de
   uma tela em qualquer notebook. Em duas, o bloco fica com metade da altura
   e sobra espaço para a foto grande ao lado. */
@media (min-width: 1025px) and (max-height: 1100px) {
    body > section#solucao .solution-grid {
        grid-template-columns: 1.35fr 1fr; gap: 34px; align-items: center;
    }
    body > section#solucao .solution-list {
        display: grid; grid-template-columns: 1fr 1fr;
        gap: clamp(9px, 1.4vh, 18px) 26px; align-content: center;
    }
}

/* Em tela baixa, o respiro da cena do cofre aperta antes de qualquer outra
   coisa: sao pixels que nao custam legibilidade nem tamanho de foto. Fecha a
   diferenca de 1,14 para ~1,0 tela em 1366x768, sem tirar conteudo. */
@media (min-width: 1025px) and (max-height: 820px) {
    body > section#solucao { padding-top: 34px !important; padding-bottom: 34px !important; }
    body > section#solucao .section-center { margin-bottom: 18px !important; }
    body > section#solucao .solution-grid { margin-top: 18px !important; }
}

/* Em 1366x768 a foto de 634px sozinha come 90% da altura util: o respiro
   apertado nao resolve. Aqui o teto de altura entra DE PROPOSITO — com
   aspect-ratio ele encolhe a largura junto, e e o que se quer: a foto fica
   menor mas continua 3:4, e a cena inteira cabe numa tela, como a cliente
   pediu. Em 385x513 ela ainda e 50% maior que os 255x340 originais. */
@media (min-width: 1025px) and (max-height: 820px) {
    body > section#solucao .seg-carousel {
        /* `width: auto` e obrigatorio: com `width:100%` o teto corta so a
           altura, a caixa deixa de ser 3:4 e o object-fit volta a comer a
           foto. Com auto, a largura acompanha e a proporcao se mantem. */
        width: auto !important;
        max-height: calc(100svh - 258px) !important;
        margin-inline: auto;
    }
}