/* ============================================================================
   MDC — Encaixe: cada seção inteira dentro da tela
   ----------------------------------------------------------------------------
   Pedido do cliente, repetido: nenhuma seção pode ficar cortada. Rolar de uma
   seção para a outra, sim; perder informação embaixo da dobra, não.

   Este arquivo faz a parte barata do trabalho, em CSS:

   1. Altura das seções "tela cheia". Elas tinham 100svh, mas a barra de
      navegação é fixa e come os primeiros 67px: a seção media uma tela e
      aparecia uma tela menos a navbar. Agora medem 100svh - 67px e fecham
      certo com o scroll-padding do snap.css.

   2. Respiro menor no desktop. O kit usava 104px em cima e embaixo de cada
      seção — 208px, quase um quarto de um notebook de 900px, gastos em ar.
      Aqui o respiro acompanha a altura da tela (5vh, entre 40 e 72px), então
      sobra espaço para o conteúdo em vez de sobrar para a margem.

   3. O que o CSS não resolve sozinho — seções que simplesmente têm mais
      conteúdo do que cabe — fica com o encaixe.js, que mede cada seção e
      reduz proporcionalmente o que passar. Este arquivo só declara a variável
      que o script escreve.

   Nada disso vale abaixo de 1025px: no celular a rolagem é outra história e
   espremer conteúdo atrapalha o gesto do dedo.
   ========================================================================== */

@media (min-width: 1025px) {

    :root { --nav-h: 67px; }

    /* ── 1. seção do tamanho da tela útil (sem a navbar) ─────────────────── */
    /* box-sizing explícito: em três páginas a régua do min-height era a caixa
       de conteúdo, e a seção acabava com min-height + respiro — 99px a mais do
       que a tela, sempre. */
    body > section.tela-cheia {
        box-sizing: border-box;
        min-height: calc(100svh - var(--nav-h));
    }

    /* A seção "tela cheia" é um flex em coluna (snap.css, para centrar o
       conteúdo). Só que o .container de dentro tem "margin: 0 auto" — e num
       flex a margem automática no eixo transversal cancela o esticamento: em
       vez de ocupar os 1200px, o container encolhia até o tamanho do conteúdo.
       Era por isso que a lista de municípios saía numa coluna só, com dez
       linhas, em vez de cinco colunas com duas. Devolver a largura resolve a
       altura junto. */
    /* A primeira seção não tem nada acima: pode ocupar a tela inteira, senão
       sobra uma faixa da seção seguinte espiando embaixo. */
    body > section.tela-cheia:first-of-type { min-height: 100svh; }

    body > section.tela-cheia > * {
        box-sizing: border-box;
        width: 100%;
    }

    /* ── 1b. o encaixe da rolagem ────────────────────────────────────────── */
    /* O kit dava 88px de scroll-margin a toda <section> — era a gambiarra para
       o link âncora não parar embaixo da navbar. Com o scroll-padding do topo
       (abaixo) a conta passou a ser feita duas vezes: o snap parava a seção
       88px baixo demais e cortava o mesmo tanto embaixo. Uma régua só. */
    html { scroll-padding-top: var(--nav-h); }
    body > section { scroll-margin-top: 0 !important; }

    /* ── 2. respiro proporcional à tela ──────────────────────────────────── */
    body > section.section,
    body > section.inside,
    body > section.sust,
    body > section.cta-section,
    body > section.dsec,
    body > section.lineup,
    body > section.tour,
    body > section.about,
    body > section.founders,
    body > section.monitoring,
    body > section.applications,
    body > section.about-section,
    body > section.gallery-section,
    body > section.municipalities-section,
    body > section.impact-section,
    body > section.cases-section {
        padding-top: clamp(40px, 5vh, 72px);
        padding-bottom: clamp(40px, 5vh, 72px);
    }

    /* hero: o topo precisa de folga por causa da navbar, o rodapé não */
    body > section.hero,
    body > section.phero {
        padding: calc(var(--nav-h) + clamp(28px, 4vh, 56px)) 0 clamp(36px, 4.5vh, 72px) !important;
    }

    /* faixas finas seguem finas */
    body > .stats-bar,
    body > .hero-stats,
    body > .rf-statsbar,
    body > .rf-band { padding-top: 0; padding-bottom: 0; }

    /* ── 2c. respiro do cabecalho, proporcional a tela ──────────────────── */
    /* O kit da 56px embaixo de todo cabecalho de secao (40px no .lp-head).
       Num monitor de 1440 isso e um detalhe; num notebook de 768px sao 56px
       tirados justamente de onde falta espaco — sozinhos empurram varias
       secoes para fora da tela e fazem o encaixe.js encolher tudo. Agora o
       respiro acompanha a altura da tela: generoso no monitor, discreto no
       notebook. */
    body > section .sheader,
    body > section .lp-head,
    body > section .section-center { margin-bottom: clamp(20px, 3.4vh, 56px); }

    /* ── 2b. teto para as fotos ──────────────────────────────────────────── */
    /* Foto grande é o que mais estoura seção: como carregam tarde (lazy), a
       seção media certo, a imagem chegava depois e empurrava tudo para fora da
       tela. O teto só morde em imagem muito alta — as pequenas não sentem. */
    body > section img { max-height: min(58vh, 620px); object-fit: cover; }
    /* A foto da hero tem altura própria, dada pela moldura em volta dela. Se o
       teto acima morder nela, a foto fica mais baixa que a moldura e sobra uma
       tarja preta embaixo — era o que acontecia no parque refrigerado e no
       centro móvel de gelo em janela baixa: 120px de tarja em 1178x583. */
    body > section .hero-image img,
    body > section .phero-img-wrap img,
    body > section .hero-img-wrap img,
    body > section .rfcar img,
    body > section .hero-carousel img,
    body > section .lp-panel img,
    body > section .hcar-slide,
    body > section .seg-slide { max-height: none; }

    /* ── 2d. a hero também obedece à altura da tela ──────────────────────── */
    /* A foto do data center é retrato (1067x1600). Sem teto de altura ela
       ficava com 879px e era ELA, não o texto, quem definia o tamanho da
       seção — 1013px numa tela de 923px. O ">" importa: nas páginas com
       carrossel a foto é neta do invólucro e tem height 100%; se esta regra
       a pegasse, voltaria a sobrar tarja preta embaixo. */
    body > section.phero .phero-img-wrap > img,
    body > section.hero .hero-img-wrap > img {
        height: clamp(300px, 56vh, 660px) !important;
        object-fit: cover;
    }

    /* Os respiros internos da hero eram fixos e somavam 126px. Acompanhando a
       tela, sobram para o conteúdo justamente onde falta espaço. */
    body > section.phero .phero-badge,
    body > section.hero .hero-badge { margin-bottom: clamp(10px, 1.4vh, 20px) !important; }
    body > section.phero h1,
    body > section.hero h1 { margin-bottom: clamp(10px, 1.4vh, 18px) !important; }
    body > section.phero .phero-desc,
    body > section.hero .hero-desc,
    body > section.hero .hero-tagline { margin-bottom: clamp(14px, 2vh, 28px) !important; }
    body > section.phero .phero-checks,
    body > section.hero .hero-checks { margin-bottom: clamp(16px, 2.2vh, 32px) !important; gap: clamp(6px, 1vh, 10px); }
    body > section.phero .phero-buttons,
    body > section.hero .hero-buttons { margin-bottom: clamp(14px, 2vh, 28px) !important; }

        /* ── 3. seção do mapa: o mapa é o protagonista ───────────────────────── */
    /* Antes a lista de municípios ficava numa coluna de 300px ao lado, e o
       mapa acabava com 824px de largura — mais estreito que o conteúdo de
       qualquer outra seção da página. Agora o mapa ocupa a largura inteira do
       container, igual às demais, e a lista flutua sobre ele num painel de
       vidro. O mapa ganha largura e altura; a lista não perde nada. */
    /* A seção passa a ocupar exatamente uma tela e o mapa fica com TODO o
       espaço que sobra depois do cabeçalho, dos números e dos filtros. Assim
       ele é sempre o maior possível — e a seção nunca precisa ser encolhida,
       porque o mapa se ajusta em vez de estourar. */
    body > section.presenca {
        box-sizing: border-box;
        /* altura definida, e nao apenas minima: sem isso o flex nao tem de
           onde distribuir a sobra e o mapa volta a usar a propria altura. */
        height: calc(100svh - var(--nav-h));
        display: flex;
        flex-direction: column;
    }
    /* respiro mais justo so nesta secao: cada pixel aqui vira mapa */
    body > section.presenca { padding-top: clamp(26px, 3.2vh, 48px) !important;
                              padding-bottom: clamp(26px, 3.2vh, 48px) !important; }
    body > section.presenca .lp-head { margin-bottom: clamp(12px, 2.1vh, 30px); }

    body > section.presenca > .container {
        flex: 1 1 auto;
        min-height: 0;
        display: flex;
        flex-direction: column;
        width: 100%;
    }
    body > section.presenca > .container > * { flex: 0 0 auto; }

    /* A moldura tem exatamente a proporcao do desenho. Sem isso sobravam duas
       colunas escuras vazias, uma de cada lado: a caixa era mais larga que o
       mapa e o SVG, centrado, deixava o resto em branco. Agora a largura sai
       da altura disponivel — nao ha o que sobrar.
       O teto de 615px e a altura em que a largura bate nos 1152px do
       container: dai para cima a caixa nao tem mais onde crescer. */
    body > section.presenca .pr-mapwrap {
        flex: 1 1 0;
        width: auto;
        max-width: 100%;
        max-height: 643px;
        aspect-ratio: 1333 / 744;
        align-self: center;
        min-height: 200px;
    }
    body > section.presenca .pr-svg {
        width: 100%;
        height: 100%;
        max-height: none;
    }

    /* Os quatro numeros passam a flutuar no rodape do mapa. Sozinhos eles
       comiam 118px da altura da secao — e altura e exatamente o que faz o
       mapa parecer grande, porque a largura sobrando vira margem vazia dos
       lados (o desenho tem proporcao fixa). */
    body > section.presenca .pr-figs {
        position: absolute;
        left: 14px;
        bottom: 14px;
        right: auto;
        z-index: 7;
        margin: 0;
        display: flex;
        gap: 0;
        padding: 4px 2px;
        border-radius: 13px;
        background: rgba(6, 14, 28, .86);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        border: 1px solid rgba(147, 197, 253, .16);
    }
    /* uma faixa fina, e nao quatro cartoes: em cima do mapa o que importa e
       ocupar o minimo de area util */
    body > section.presenca .pr-fig {
        display: flex;
        align-items: baseline;
        gap: 8px;
        padding: 7px 16px;
        background: none;
        border: 0;
        border-right: 1px solid rgba(255, 255, 255, .09);
        border-radius: 0;
    }
    body > section.presenca .pr-fig:last-child { border-right: 0; }
    body > section.presenca .pr-fig-n { font-size: 1.16rem; }
    body > section.presenca .pr-fig-l { margin-top: 0; font-size: .6rem; letter-spacing: .7px; }

    /* Os chips de PROGRAMA são um controle secundário: ficam compactos para
       sobrar altura ao mapa. A fileira de ROTAS logo abaixo é outra coisa —
       é a navegação principal da seção desde 18/09 — e mantém o corpo e o
       respiro que o infovia.css define. Por isso a regra aponta para os
       filhos diretos de .pr-chips, e não para .pr-chip em geral. */
    body > section.presenca .pr-chips > .pr-chip { padding: 6px 11px; font-size: .69rem; }
    body > section.presenca .pr-chips { gap: 6px; }

    /* A legenda das rotas fica no rodapé do mapa (ver proporcao.css seção 12):
       o canto de cima é onde o desenho tem Roraima. */

    /* A LISTA DAS LOCALIDADES                     (reescrito em 18/09/2026)

       Aqui a lista era um painel que flutuava no canto de baixo do mapa,
       aberto por um botão. Era a mesma ideia dos filtros flutuantes, e caiu
       pelo mesmo motivo: o que flutua sobre o mapa esconde mapa, e o que
       esconde mapa gerou a carta do Cel. Lustosa em 17/09.

       Agora a lista é um bloco comum, embaixo da legenda de texto, e o botão
       "Ver todas as localidades" apenas a estende. Nada cobre o desenho.

       O `position: static` precisa ser explícito: o .pr-foot deixou de ser
       filho do .pr-mapwrap, então um `absolute` aqui passaria a se ancorar no
       .container e o painel iria parar em cima da legenda. */
    body > section.presenca .pr-foot {
        position: static;
        margin-top: 14px;
        width: auto;
        display: block;
    }
    /* Recolhida, a lista fica fora do fluxo — não só encurtada. Com ela
       sempre à vista a seção ia a 1327px numa tela de 900 (1,47 tela), e o
       combinado com o CEO é a cena caber. Quem precisa dos 56 nomes clica em
       "Ver todas as localidades"; quem precisa dos nomes de UMA rota já os
       tem na legenda logo acima, sem clicar em nada. */
    body > section.presenca .pr-list { display: none; }
    body > section.presenca .pr-list.open {
        display: block;
        max-height: none;
        overflow: visible;
        -webkit-mask-image: none;
        mask-image: none;
        margin-top: 16px;
    }
    body > section.presenca .pr-listfoot { margin-top: 0; }
    /* O script esconde o botão quando a lista "cabe" — e uma lista recolhida
       mede o tamanho recolhido. Aqui o botão é o que dá acesso a ela, então
       fica sempre visível. */
    body > section.presenca .pr-more { display: inline-flex !important; }

    /* Os filtros somavam 212px de altura: o rotulo "Infovias" ocupava uma
       linha inteira sozinho e empurrava os botoes para mais duas. Rotulo na
       mesma linha dos botoes e a barra cai para menos da metade. */
    body > section.presenca .pr-chips,
    body > section.presenca .pr-ivchips { max-width: none; }
    body > section.presenca .pr-ivlabel { width: auto; flex: 0 0 auto; align-self: center; }
    body > section.presenca .pr-bar { margin-bottom: clamp(8px, 1.4vh, 16px); }

    /* numeros: o respiro interno tambem acompanha a tela */
    body > section.presenca .pr-figs { margin-bottom: clamp(12px, 2vh, 26px); }
    body > section.presenca .pr-fig { padding: clamp(10px, 1.7vh, 18px) 18px; }

    /* o cabecalho desta secao pode ser mais largo: a linha de apoio cabia em
       duas linhas em vez de tres */
    body > section.presenca .lp-head { max-width: 1040px; }

    /* ── 3b. o que tem altura fixa passa a acompanhar a tela ────────────── */
    /* Estes valores foram escritos pensando num monitor grande. Num notebook
       de 768px eles sozinhos estouram a seção e obrigam o encaixe.js a
       encolher texto e foto. Nenhum conteúdo sai — só o que é respiro e
       moldura encolhe junto com a tela. */

    /* paineis de serviço da home (altura fixa de 560px) */
    /* A faixa de servicos acompanha a proporcao da foto.
       Os dois paineis usam arquivos de 1240x827 (3:2). Com altura fixa, num
       monitor de 1920 a caixa virava 960x535 — proporcao 1,80 — e o
       object-fit:cover cortava 107px da foto em cima e embaixo. Era a faixa
       espremida e baixa demais.

       A proporcao vai na FILEIRA, nao no painel: o hover anima a largura de
       cada painel (flex-grow), e aspect-ratio no painel faria a altura pular
       junto a cada passada de mouse. Na fileira a altura fica firme e so as
       larguras deslizam.

       2480/827 = dois paineis 3:2 lado a lado, com gap 0. O max-height so
       entra em tela baixa, onde a secao precisa caber de qualquer jeito. */
    /* SEM max-height aqui, de proposito. `aspect-ratio` com `max-height` nao
       corta so a altura: ele ENCOLHE A LARGURA junto, para preservar a
       proporcao. A fileira ficava com 823px numa tela de 1334 e sobrava um
       vazio a direita. Como secao com foto nao encolhe mais (ver encaixe.js),
       a altura pode ser a que a proporcao pedir. */
    body > section .lp-row-wide {
        aspect-ratio: 2480 / 827;
        min-height: 300px;
    }
    body > section .lp-row-wide .lp-panel { height: 100%; }

    /* cartões de modelo do data center: a foto é o que mais pesa */
    body > section .mcard-img { height: clamp(140px, 20vh, 250px); }
    body > section .mcard-img img { height: 100%; object-fit: cover; }

    /* Cartões de vidro (usados em quase todas as páginas). O ícone ficava
       numa linha só para ele, acima do título: 66px por fileira de cartões,
       que numa grade de 3x2 viram 132px — mais do que a diferença entre a
       seção caber e não caber num notebook. Ao lado do título, some o
       desperdício e o cartão fica mais fácil de escanear. */
    body > section .icard {
        padding: clamp(16px, 2.6vh, 28px) 24px;
        display: grid;
        grid-template-columns: auto 1fr;
        gap: 0 13px;
        align-content: start;
    }
    body > section .icard-icon {
        width: clamp(38px, 4.6vh, 50px) !important;
        height: clamp(38px, 4.6vh, 50px) !important;
        grid-row: 1; grid-column: 1;
        margin-bottom: 0 !important;
        align-self: center;
    }
    body > section .icard > h3 {
        grid-row: 1; grid-column: 2;
        margin-bottom: 0 !important;
        align-self: center;
    }
    body > section .icard > p {
        grid-column: 1 / -1;
        margin-top: clamp(10px, 1.6vh, 16px);
        margin-bottom: clamp(9px, 1.4vh, 14px) !important;
    }
    body > section .icard > .icard-tag { grid-column: 1 / -1; justify-self: start; }
    body > section .inside-grid { gap: clamp(12px, 1.8vh, 20px); }

    /* listas numeradas ao lado de carrossel (cofre e sala segura) */
    body > section .solution-list { gap: clamp(10px, 1.7vh, 24px); }
    body > section .solution-grid { margin-top: clamp(18px, 3vh, 48px); }
    body > section .seg-carousel,
    body > section .seg-slides,
    body > section .seg-slide { height: clamp(320px, 48vh, 640px); }
    body > section .seg-slide img { height: 100%; object-fit: cover; }

    /* Cofre e sala segura: a lista de cinco itens numerados, numa coluna só,
       passa de 700px — mais do que um notebook tem para a seção inteira. Em
       tela baixa ela vira duas colunas e a foto divide a linha com ela. */
    @media (max-height: 850px) {
        body > section .solution-grid { grid-template-columns: 1.45fr 1fr; gap: 32px; }
        body > section .solution-list {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: clamp(10px, 1.6vh, 20px) 28px;
            align-content: center;
        }
        body > section .solution-item p { font-size: .8rem; line-height: 1.5; }
    }

    /* fotos grandes de seção que ficavam com altura de monitor */
    body > section .vp-img img,
    body > section .about-img img { height: clamp(240px, 38vh, 460px); object-fit: cover; }

    /* ── 4. encaixe fino, escrito pelo encaixe.js ────────────────────────── */
    body > section[data-encaixe] > * { zoom: var(--enc, 1); }
}

@supports not (height: 100svh) {
    @media (min-width: 1025px) {
        body > section.tela-cheia { min-height: calc(100vh - var(--nav-h)); }
    }
}

/* Seção que precisaria encolher o texto abaixo do piso aperta primeiro o
   próprio respiro: o encaixe.js marca com esta classe e refaz a conta.
   Espaço em branco custa menos que legibilidade. */
@media (min-width: 1025px) {
    body > section.encaixe-apertado {
        padding-top: 24px !important;
        padding-bottom: 24px !important;
    }
}

/* ── celular: os números voltam para antes da lista ─────────────────────────
   No desktop os números e a lista de municípios flutuam sobre o mapa, e para
   isso precisaram virar filhos dele no HTML. No celular não há sobreposição —
   os três empilham — e a ordem do HTML deixaria a lista antes dos números.
   Aqui a ordem de leitura volta a ser mapa → números → lista. */
@media (max-width: 1024px) {
    section.presenca .pr-mapwrap { display: flex; flex-direction: column; }
    section.presenca .pr-mapwrap > .pr-svg { order: 1; }
    section.presenca .pr-mapwrap > .pr-figs { order: 2; margin: 16px 0 0; }
    section.presenca .pr-mapwrap > .pr-foot { order: 3; }

    /* A lista recolhida ficava com 230px de altura e um esmaecido no pé,
       mostrando "AMAZONAS 35" e mais nada — 280px de bloco quase vazio entre
       o mapa e o fim da seção, num telefone. Ou está aberta, ou não está: o
       botão "Ver todas as localidades" continua ali para abrir. */
    section.presenca .pr-list { display: none; }
    section.presenca .pr-list.open {
        display: block;
        max-height: none;
        overflow: visible;
        -webkit-mask-image: none;
        mask-image: none;
        margin-top: 14px;
    }
    section.presenca .pr-more { display: inline-flex !important; }
}