/*
 * A base visual dos sites da Top Result (topresult.com.br e sisgp.com.br): a mesma identidade do Fluxus ERP no novo
 * padrão visual (o azul em degradê da faixa do topo, a Nunito Sans, os cartões de canto redondo), com tema claro e
 * escuro. As cores são as de .fs-app (FluxusFront/_views/manual/apps/fsmanager/styles.css) e as do tema escuro do
 * exibicao.css: se mudarem lá, mudam aqui.
 *
 * O tema vem do aparelho; o botão do alto troca e a escolha fica no navegador (site.js põe data-tema no <html>).
 * Cada site só acrescenta, no próprio HTML, o conteúdo: não há folha de estilo por site.
 */

@font-face{ font-family: "Nunito Sans"; font-weight: 400; font-display: swap; src: url("fontes/NunitoSans-Regular.ttf") format("truetype"); }
@font-face{ font-family: "Nunito Sans"; font-weight: 600; font-display: swap; src: url("fontes/NunitoSans-SemiBold.ttf") format("truetype"); }
@font-face{ font-family: "Nunito Sans"; font-weight: 700; font-display: swap; src: url("fontes/NunitoSans-Bold.ttf") format("truetype"); }
@font-face{ font-family: "Nunito Sans"; font-weight: 800; font-display: swap; src: url("fontes/NunitoSans-ExtraBold.ttf") format("truetype"); }
@font-face{ font-family: "Nunito Sans"; font-weight: 900; font-display: swap; src: url("fontes/NunitoSans-Black.ttf") format("truetype"); }

:root{
    --primaria: #0467EC;
    --sobre-primaria: #FFFFFF;
    --fundo: #FAFCFE;
    --superficie: #F3F8FE;
    --superficie-alta: #E7F0FC;
    --cartao: #FFFFFF;
    --texto: #1D2D3C;
    --suave: #5C6B7F;
    --linha: #C7D2E0;
    --grad-a: #0283FB;
    --grad-b: #0357C8;
    --verde: #008000;
    --laranja: #B26A00;
    --sombra: 0 10px 30px rgba(29, 45, 60, 0.12);
    --sombra-forte: 0 24px 60px rgba(3, 40, 90, 0.28);
    --coluna: 1200px;
    color-scheme: light;
}

:root[data-tema="escuro"]{
    --primaria: #83CBEB;
    --sobre-primaria: #003257;
    --fundo: #101418;
    --superficie: #1F2329;
    --superficie-alta: #2A3038;
    --cartao: #191C20;
    --texto: #E1E2E8;
    --suave: #A9B1BC;
    --linha: #3A414A;
    --grad-a: #0B4A86;
    --grad-b: #062B4D;
    --verde: #5CC25C;
    --laranja: #E8A64C;
    --sombra: 0 10px 30px rgba(0, 0, 0, 0.4);
    --sombra-forte: 0 24px 60px rgba(0, 0, 0, 0.55);
    color-scheme: dark;
}

*, *::before, *::after{ box-sizing: border-box; }

html{
    scroll-behavior: smooth;
    scroll-padding-top: 84px;
    -webkit-text-size-adjust: 100%;
}

body{
    margin: 0;
    background: var(--fundo);
    color: var(--texto);
    font-family: "Nunito Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
    font-size: 17px;
    font-weight: 600;
    line-height: 1.55;
    letter-spacing: 0.1px;
}

img, svg{ max-width: 100%; }
img{ height: auto; }
a{ color: var(--primaria); }
h1, h2, h3, h4, p{ margin: 0; }
h1, h2, h3, h4{ line-height: 1.15; font-weight: 900; letter-spacing: -0.2px; }

.miolo{
    width: 100%;
    max-width: var(--coluna);
    margin: 0 auto;
    padding: 0 24px;
}

/* os ícones são os do Bootstrap Icons, a mesma versão que o sistema usa (a folha vem no <head> de cada página) */
.bi{ line-height: 1; }

/* pular para o conteúdo (teclado e leitor de tela) */
.pular{
    position: absolute;
    left: -9999px;
    top: 8px;
    z-index: 100;
    padding: 10px 16px;
    border-radius: 12px;
    background: var(--cartao);
    color: var(--texto);
    font-weight: 800;
}
.pular:focus{ left: 8px; }

/* ---------------------------------------------------------------------------
   A barra do alto: presa na janela, com a marca, os atalhos das seções, o botão do tema e a chamada
   --------------------------------------------------------------------------- */
.barra{
    position: sticky;
    top: 0;
    z-index: 50;
    background: var(--grad-b);
    color: #fff;
    box-shadow: 0 2px 14px rgba(3, 40, 90, 0.25);
}
:root[data-tema="escuro"] .barra{
    background: #161A1F;
    border-bottom: 1px solid #2A3038;
}
.barra .miolo{
    display: flex;
    align-items: center;
    gap: 18px;
    min-height: 64px;
}
.marca{
    display: flex;
    align-items: center;
    gap: 10px;
    color: #fff;
    font-size: 1.35rem;
    font-weight: 900;
    letter-spacing: -0.3px;
    text-decoration: none;
    white-space: nowrap;
}
.marca img{
    width: 36px;
    height: 36px;
    border-radius: 10px;
}
.marca small{
    padding: 1px 8px;
    border-radius: 8px;
    background: #fff;
    color: var(--grad-b);
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0.4px;
}
.barra nav{
    display: flex;
    align-items: center;
    gap: 2px;
    margin-left: auto;
}
.barra nav a{
    padding: 8px 12px;
    border-radius: 12px;
    color: rgba(255, 255, 255, 0.92);
    font-size: 0.95rem;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
}
.barra nav a:hover{ background: rgba(255, 255, 255, 0.16); color: #fff; }
.barra-botao{
    display: grid;
    place-items: center;
    flex: none;
    width: 42px;
    height: 42px;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.16);
    color: #fff;
    font-size: 1.05rem;
    cursor: pointer;
}
.barra-botao:hover{ background: rgba(255, 255, 255, 0.28); }
#abre-menu{ display: none; }
:root[data-tema="escuro"] .so-claro, :root:not([data-tema="escuro"]) .so-escuro{ display: none; }

/* ---------------------------------------------------------------------------
   Botões
   --------------------------------------------------------------------------- */
.botao{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-height: 50px;
    padding: 0 24px;
    border: 2px solid transparent;
    border-radius: 25px;
    background: var(--primaria);
    color: var(--sobre-primaria);
    font-family: inherit;
    font-size: 1rem;
    font-weight: 800;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.botao:hover{ transform: translateY(-1px); box-shadow: var(--sombra); }
.botao-claro{ background: #fff; color: #0357C8; }
.botao-vazado{ border-color: rgba(255, 255, 255, 0.7); background: transparent; color: #fff; }
.botao-contorno{ border-color: var(--linha); background: var(--cartao); color: var(--texto); }
.botao-zap{ background: #128C4B; color: #fff; }
.botao-pequeno{ min-height: 42px; padding: 0 18px; font-size: 0.92rem; }

/* ---------------------------------------------------------------------------
   A abertura: a faixa azul em degradê, com a seta da marca ao fundo, o texto de um lado e a tela do sistema do outro
   --------------------------------------------------------------------------- */
.abertura{
    position: relative;
    overflow: hidden;
    isolation: isolate;
    padding: 64px 0 0 0;
    background: linear-gradient(135deg, var(--grad-a), var(--grad-b));
    color: #fff;
}
.abertura-fundo{
    position: absolute;
    right: -120px;
    top: -110px;
    z-index: -1;
    height: 720px;
    opacity: 0.07;
    fill: #fff;
}
.abertura-grade{
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    align-items: center;
    gap: 48px;
}
/* a faixa não tem respiro embaixo para a tela do sistema encostar na borda; o texto ganha o dele aqui, senão os
   botões encostam também */
.abertura-grade > :first-child{ padding-bottom: 64px; }
.etiqueta{
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 5px 14px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.16);
    color: #fff;
    font-size: 0.85rem;
    font-weight: 800;
    letter-spacing: 0.3px;
}
.abertura h1{
    margin: 18px 0 16px 0;
    font-size: clamp(2.1rem, 4.6vw, 3.5rem);
}
.abertura .chamada{
    max-width: 34em;
    color: rgba(255, 255, 255, 0.92);
    font-size: 1.15rem;
}
.abertura-acoes{
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 28px;
}
.abertura-tela{
    position: relative;
    align-self: end;
    padding-top: 12px;
}
.abertura-tela .tela{
    border-radius: 16px 16px 0 0;
    box-shadow: var(--sombra-forte);
}
.abertura-celular{
    position: absolute;
    right: -6px;
    bottom: 0;
    width: 24%;
    min-width: 120px;
    border: 5px solid #101418;
    border-bottom: 0;
    border-radius: 22px 22px 0 0;
    background: #101418;
    box-shadow: var(--sombra-forte);
    overflow: hidden;
}
.abertura-celular img{ display: block; width: 100%; }

/* a abertura da página que não tem tela do sistema para mostrar: no lugar dela, um cartão com um caminho em etapas */
.abertura-lado{ padding-bottom: 64px; }
.caminho{
    padding: 24px 26px 14px 26px;
    border-radius: 18px;
    background: var(--cartao);
    color: var(--texto);
    box-shadow: var(--sombra-forte);
}
.caminho-titulo{
    display: block;
    margin-bottom: 8px;
    color: var(--primaria);
    font-size: 0.8rem;
    font-weight: 900;
    letter-spacing: 1.2px;
    text-transform: uppercase;
}
.caminho ol{
    margin: 0;
    padding: 0;
    list-style: none;
}
.caminho li{
    position: relative;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 0;
    font-weight: 800;
}
/* o traço que liga uma etapa à seguinte */
.caminho li + li::before{
    content: "";
    position: absolute;
    left: 22px;
    top: -12px;
    width: 2px;
    height: 24px;
    background: var(--linha);
}
.caminho .cartao-icone{ flex: none; margin: 0; }

/* a tela do sistema dentro de uma moldura de janela */
.tela{
    overflow: hidden;
    border: 1px solid rgba(29, 45, 60, 0.18);
    border-radius: 16px;
    background: var(--cartao);
    box-shadow: var(--sombra);
}
:root[data-tema="escuro"] .tela{ border-color: #3A414A; }
.tela-topo{
    display: flex;
    align-items: center;
    gap: 6px;
    height: 30px;
    padding: 0 12px;
    background: #E7EDF5;
}
:root[data-tema="escuro"] .tela-topo{ background: #2A3038; }
.tela-topo i{
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #B8C4D3;
}
:root[data-tema="escuro"] .tela-topo i{ background: #4A525D; }
.tela img{
    display: block;
    width: 100%;
}

/* ---------------------------------------------------------------------------
   Seções
   --------------------------------------------------------------------------- */
.secao{ padding: 84px 0; }
.secao-fundo{ background: var(--superficie); }
.secao-cabeca{
    max-width: 760px;
    margin: 0 auto 44px auto;
    text-align: center;
}
.secao-cabeca .sobre{
    color: var(--primaria);
    font-size: 0.85rem;
    font-weight: 900;
    letter-spacing: 1.4px;
    text-transform: uppercase;
}
.secao-cabeca h2{
    margin: 10px 0 14px 0;
    font-size: clamp(1.7rem, 3.2vw, 2.5rem);
}
.secao-cabeca p{
    color: var(--suave);
    font-size: 1.08rem;
}

/* os cartões em grade */
.grade{
    display: grid;
    gap: 16px;
}
.grade-4{ grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grade-3{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grade-2{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cartao{
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 22px;
    border: 1px solid var(--linha);
    border-radius: 18px;
    background: var(--cartao);
}
.cartao h3{ font-size: 1.15rem; }
.cartao p{ color: var(--suave); font-size: 0.98rem; }
.cartao-icone{
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    margin-bottom: 6px;
    border-radius: 14px;
    background: var(--superficie-alta);
    color: var(--primaria);
    font-size: 1.3rem;
}
.cartao-passo{
    color: var(--primaria);
    font-size: 0.8rem;
    font-weight: 900;
    letter-spacing: 1px;
    text-transform: uppercase;
}
/* o selo: uma situação, no lugar onde os outros cartões têm o botão */
.selo{
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 42px;
    padding: 0 16px;
    border: 1px dashed var(--linha);
    border-radius: 21px;
    color: var(--suave);
    font-size: 0.92rem;
    font-weight: 800;
}
a.cartao{
    color: inherit;
    text-decoration: none;
    transition: transform 0.12s ease, box-shadow 0.12s ease, border-color 0.12s ease;
}
a.cartao:hover{
    transform: translateY(-2px);
    border-color: var(--primaria);
    box-shadow: var(--sombra);
}

/* os dados da empresa: o nome de cada dado e o valor, lado a lado, e o botão do comprovante no fim */
.empresa{
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 22px 32px;
    max-width: 980px;
    margin: 0 auto;
    padding: 26px 28px;
}
.dados{
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    gap: 8px 20px;
    flex: 1 1 420px;
    margin: 0;
}
.dados dt{
    color: var(--suave);
    font-size: 0.9rem;
    font-weight: 700;
}
.dados dd{
    margin: 0;
    font-weight: 700;
    overflow-wrap: anywhere;
}

/* o destaque: o texto de um lado e a tela do outro; .destaque-invertido troca os lados */
.destaque{
    display: grid;
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
    align-items: center;
    gap: 48px;
}
.destaque + .destaque{ margin-top: 72px; }
.destaque-invertido .destaque-texto{ order: 2; }
.destaque-texto h3{
    margin: 10px 0 12px 0;
    font-size: clamp(1.4rem, 2.4vw, 1.9rem);
}
.destaque-texto > p{ color: var(--suave); }
.destaque-texto .sobre{
    color: var(--primaria);
    font-size: 0.8rem;
    font-weight: 900;
    letter-spacing: 1.2px;
    text-transform: uppercase;
}
.lista{
    display: grid;
    gap: 10px;
    margin: 18px 0 0 0;
    padding: 0;
    list-style: none;
}
.lista li{
    display: flex;
    gap: 10px;
    font-size: 0.98rem;
}
.lista .bi{
    margin-top: 0.2em;
    color: var(--verde);
}

/* a faixa de chamada */
.chamada-final{
    position: relative;
    overflow: hidden;
    isolation: isolate;
    padding: 72px 0;
    background: linear-gradient(135deg, var(--grad-a), var(--grad-b));
    color: #fff;
    text-align: center;
}
.chamada-final h2{ font-size: clamp(1.7rem, 3.2vw, 2.4rem); }
.chamada-final p{
    max-width: 640px;
    margin: 14px auto 28px auto;
    color: rgba(255, 255, 255, 0.92);
    font-size: 1.08rem;
}
.chamada-final .abertura-acoes{ justify-content: center; margin-top: 0; }

/* os aplicativos: o ícone de cada um e o nome */
.apps{
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
    gap: 12px;
}
.app{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 18px 8px 14px 8px;
    border: 1px solid var(--linha);
    border-radius: 16px;
    background: var(--cartao);
    min-width: 0;
    font-size: 0.9rem;
    font-weight: 800;
    line-height: 1.2;
    text-align: center;
    overflow-wrap: anywhere;
}
.app img{
    width: 52px;
    height: 52px;
    padding: 8px;
    border-radius: 14px;
    background: #E7F0FC;
}

/* o aplicativo que é botão abre a janela com o texto dele */
button.app{
    color: inherit;
    font-family: inherit;
    letter-spacing: inherit;
    cursor: pointer;
    transition: transform 0.12s ease, box-shadow 0.12s ease, border-color 0.12s ease;
}
button.app:hover, button.app:focus-visible{
    transform: translateY(-2px);
    border-color: var(--primaria);
    box-shadow: var(--sombra);
}

/* ---------------------------------------------------------------------------
   A janela: abre por cima da página com o texto de um item (site.js, data-sobre). O topo tem a cor da faixa do
   site, o meio rola e o pé leva as setas para o item vizinho e a chamada.
   --------------------------------------------------------------------------- */
html:has(dialog.janela[open]){ overflow: hidden; }
.janela{
    width: min(580px, calc(100vw - 32px));
    max-height: min(700px, calc(100vh - 32px));
    max-height: min(700px, calc(100dvh - 32px));
    padding: 0;
    border: 0;
    border-radius: 20px;
    background: var(--cartao);
    color: var(--texto);
    box-shadow: var(--sombra-forte);
    overflow: hidden;
}
.janela[open]{
    display: flex;
    flex-direction: column;
    animation: janela-entra 0.16s ease-out;
}
.janela::backdrop{ background: rgba(6, 22, 44, 0.62); }
@keyframes janela-entra{
    from{ opacity: 0; transform: translateY(10px) scale(0.98); }
}
.janela-topo{
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 16px 18px 22px;
    background: linear-gradient(135deg, var(--grad-a), var(--grad-b));
    color: #fff;
}
.janela-icone{
    flex: none;
    width: 54px;
    height: 54px;
    padding: 8px;
    border-radius: 14px;
    background: #E7F0FC;
}
.janela-titulo{
    flex: 1 1 auto;
    min-width: 0;
}
.janela-grupo{
    display: block;
    margin-bottom: 2px;
    color: rgba(255, 255, 255, 0.86);
    font-size: 0.76rem;
    font-weight: 900;
    letter-spacing: 1.2px;
    text-transform: uppercase;
}
.janela-titulo h3{
    font-size: 1.35rem;
    overflow-wrap: anywhere;
}
.janela-fecha{
    display: grid;
    place-items: center;
    flex: none;
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.16);
    color: #fff;
    font-size: 1rem;
    cursor: pointer;
}
.janela-fecha:hover{ background: rgba(255, 255, 255, 0.3); }
.janela-fecha:focus-visible{ outline-color: #fff; }
.janela-corpo{
    flex: 1 1 auto;
    min-height: 0;
    padding: 22px 24px;
    overflow-y: auto;
}
.janela-corpo > p{ font-size: 1.05rem; }
.janela-corpo ul{
    display: grid;
    gap: 10px;
    margin: 18px 0 0 0;
    padding: 0;
    list-style: none;
}
.janela-corpo li{
    position: relative;
    padding-left: 24px;
    color: var(--suave);
    font-size: 0.98rem;
}
.janela-corpo li::before{
    content: "";
    position: absolute;
    left: 4px;
    top: 0.55em;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--primaria);
}
.janela-pe{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding: 14px 18px;
    border-top: 1px solid var(--linha);
    background: var(--superficie);
}
.janela-passo{
    display: grid;
    place-items: center;
    flex: none;
    width: 42px;
    height: 42px;
    border: 1px solid var(--linha);
    border-radius: 50%;
    background: var(--cartao);
    color: var(--texto);
    font-size: 1rem;
    cursor: pointer;
}
.janela-passo:hover{ border-color: var(--primaria); color: var(--primaria); }
.janela-conta{
    margin-right: auto;
    padding-left: 6px;
    color: var(--suave);
    font-size: 0.88rem;
    font-weight: 700;
}

/* perguntas: cada uma abre e fecha */
.perguntas{
    display: grid;
    gap: 10px;
    max-width: 860px;
    margin: 0 auto;
}
.perguntas details{
    border: 1px solid var(--linha);
    border-radius: 16px;
    background: var(--cartao);
}
.perguntas summary{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 22px;
    font-size: 1.05rem;
    font-weight: 800;
    list-style: none;
    cursor: pointer;
}
.perguntas summary::-webkit-details-marker{ display: none; }
.perguntas summary::after{
    content: "+";
    flex: none;
    color: var(--primaria);
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1;
}
.perguntas details[open] summary::after{ content: "–"; }
.perguntas details p{
    padding: 0 22px 18px 22px;
    color: var(--suave);
}
.perguntas details p + p{ margin-top: -6px; }

/* o rodapé */
.rodape{
    padding: 44px 0 32px 0;
    border-top: 1px solid var(--linha);
    background: var(--superficie);
    color: var(--suave);
    font-size: 0.95rem;
}
.rodape-grade{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 28px 48px;
}
.rodape .marca{ color: var(--texto); }
.rodape h4{
    margin-bottom: 10px;
    color: var(--texto);
    font-size: 0.95rem;
}
.rodape ul{
    display: grid;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.rodape a{ color: var(--suave); text-decoration: none; }
.rodape a:hover{ color: var(--primaria); }
.rodape-fim{
    margin-top: 32px;
    padding-top: 18px;
    border-top: 1px solid var(--linha);
    font-size: 0.88rem;
}

/* o botão do WhatsApp, preso no canto */
.zap{
    position: fixed;
    right: 18px;
    bottom: 18px;
    z-index: 40;
    display: grid;
    place-items: center;
    width: 58px;
    height: 58px;
    border-radius: 50%;
    background: #128C4B;
    color: #fff;
    font-size: 1.7rem;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}

/* o que entra na tela aparece subindo um pouco (só para quem não pediu menos movimento) */
@media (prefers-reduced-motion: no-preference){
    .surge{ opacity: 0; transform: translateY(18px); transition: opacity 0.5s ease, transform 0.5s ease; }
    .surge.visto{ opacity: 1; transform: none; }
}

:focus-visible{
    outline: 3px solid color-mix(in srgb, var(--primaria) 60%, transparent);
    outline-offset: 3px;
}
.barra :focus-visible, .abertura :focus-visible, .chamada-final :focus-visible{ outline-color: #fff; }

/* ---------------------------------------------------------------------------
   Telas menores
   --------------------------------------------------------------------------- */
@media (max-width: 1080px){
    .grade-4{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .barra nav{
        position: absolute;
        left: 0;
        right: 0;
        top: 100%;
        display: none;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: 8px 16px 16px 16px;
        background: var(--grad-b);
        box-shadow: 0 14px 24px rgba(3, 40, 90, 0.3);
    }
    :root[data-tema="escuro"] .barra nav{ background: #161A1F; }
    .barra.menu-aberto nav{ display: flex; }
    .barra nav a{ padding: 12px; font-size: 1.05rem; }
    #abre-menu{ display: grid; }
    .barra .miolo > .botao{ margin-left: auto; }
}

@media (max-width: 900px){
    .abertura{ padding-top: 44px; }
    .abertura-grade, .destaque{ grid-template-columns: minmax(0, 1fr); gap: 28px; }
    .abertura-grade > :first-child{ padding-bottom: 0; }
    .abertura-lado{ padding-bottom: 44px; }
    .destaque-invertido .destaque-texto{ order: 0; }
    .grade-3{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .secao{ padding: 60px 0; }
    .destaque + .destaque{ margin-top: 56px; }
}

@media (max-width: 620px){
    body{ font-size: 16px; }
    .miolo{ padding: 0 16px; }
    .grade-4, .grade-3, .grade-2{ grid-template-columns: minmax(0, 1fr); }
    .barra .miolo > .botao span{ display: none; }
    .barra .miolo > .botao{ padding: 0 14px; }
    .abertura-acoes .botao{ flex: 1 1 100%; }
    .dados{ grid-template-columns: minmax(0, 1fr); gap: 0; }
    .dados dd{ margin-bottom: 12px; }
    .empresa{ padding: 20px; }
    .empresa .botao{ flex: 1 1 100%; white-space: normal; text-align: center; }
    .apps{ grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 8px; }
    .app{ padding: 14px 4px 12px 4px; font-size: 0.82rem; }
    .secao{ padding: 48px 0; }
    .zap{ width: 52px; height: 52px; font-size: 1.5rem; }
    .janela-topo{ padding: 14px 12px 14px 16px; }
    .janela-corpo{ padding: 18px 16px; }
    .janela-pe{ padding: 12px; }
    .janela-pe .botao{ flex: 1 1 100%; }
}

@media (prefers-reduced-motion: reduce){
    .janela[open]{ animation: none; }
    button.app{ transition: none; }
}