/* A PÁGINA /baixar (o programa de computador): as peças da landing (landing.css:
   céu da lista, grupos com o triângulo, contatos, caixas, botões Aero) mais o
   que só esta página tem: os cartões de download, o escudo, a tabela de
   comparação, o SHA-256, a caixa azul do aviso do Windows e o aviso do
   navegador desenhados aqui. Claro e escuro (o escuro segue o sistema). */

.pagina-baixar {
  --fundo: #fff;
  --fundo-caixa: #fff;
  --fundo-suave: #f3f8fd;
  --linha: #d7e6f4;
  --linha-forte: #8eb4d9;
  --texto-caixa: #333;
  --codigo-fundo: #f4f7fa;
  --codigo-borda: #c9d6e3;
  --sim: #2e7d1f;
  --nao: #8a96a3;
  --destaque: #ffd84d;
  background: var(--fundo);
}

/* ------------------------------------------------- herói: texto e o cartão do escudo */

.heroi-baixar {
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  padding-bottom: 30px;
}

.heroi-baixar h1 {
  font-size: 38px;
}

.versao-linha {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  font-size: 14px;
  color: var(--apagado);
}

.confianca {
  position: relative;
  padding: 18px 20px 16px 20px;
  background: linear-gradient(#ffffff, #eef7fe);
}

.confianca h2 {
  margin: 0 0 8px 88px;
  min-height: 34px;
  font-size: 22px;
  font-weight: 400;
  color: var(--titulo);
}

.escudo-grande {
  position: absolute;
  left: 16px;
  top: 12px;
  filter: drop-shadow(0 4px 6px rgb(20 80 140 / 30%));
}

.confianca ul {
  margin: 0 0 0 88px;
  padding: 0;
  list-style: none;
}

.confianca li {
  position: relative;
  padding: 3px 0 3px 22px;
  color: var(--texto-caixa);
  font-size: 15px;
}

.confianca li::before,
.tabela-wlm td.sim::before {
  content: "";
  position: absolute;
  left: 0;
  top: 7px;
  width: 15px;
  height: 13px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 13'%3E%3Cpath d='M1.8 7 L5.6 10.6 L13.2 2.2' fill='none' stroke='%232e7d1f' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat;
}

.confianca p {
  margin: 10px 0 0 88px;
  font-size: 14px;
}

/* ------------------------------------------------- os cartões de download */

.secao-baixar {
  padding-top: 0;
}

.downloads {
  list-style: none;
  margin: 10px 0 0;
  padding: 0 0 0 17px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.download {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 14px 16px;
  background: var(--fundo-caixa);
  border: 1px solid var(--borda-caixa);
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(30, 57, 91, 0.12);
}

/* o sistema de quem abriu (baixar.js) fica em destaque */
.download.e-o-seu {
  border-color: #3c7fb1;
  box-shadow:
    0 0 0 2px #7ec2f0,
    0 4px 14px rgba(30, 57, 91, 0.2);
}

.download-cabeca {
  display: flex;
  align-items: center;
  gap: 10px;
}

.download-icone {
  flex: none;
}

.download h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 400;
  color: var(--titulo);
}

.download-cabeca p {
  margin: 0;
  font-size: 13px;
  color: var(--apagado);
}

.download .botao-aero {
  width: 100%;
  min-height: 42px;
}

.download-dados {
  margin: 0;
  font-size: 13px;
}

.download-dados div {
  display: flex;
  gap: 6px;
  padding: 2px 0;
  border-top: 1px dotted var(--linha);
}

.download-dados dt {
  flex: none;
  color: var(--apagado);
  min-width: 6.5em;
}

.download-dados dd {
  margin: 0;
  color: var(--texto-caixa);
  overflow-wrap: anywhere;
}

.aviso-do-sistema {
  margin: 10px 0 0 17px;
  padding: 8px 12px;
  font-size: 14px;
  color: var(--texto-caixa);
  background: var(--fundo-suave);
  border: 1px solid var(--linha);
  border-radius: 3px;
}

.aviso-forte {
  background: #fff8d6;
  border-color: #e6cf6b;
  color: #4a3d00;
}

.aviso-do-sistema[hidden] {
  display: none;
}

.gratis {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 14px;
}

.notas {
  margin: 4px 0 0 17px;
  font-size: 14px;
}

.notas summary {
  cursor: pointer;
  color: var(--link);
  min-height: 32px;
  display: flex;
  align-items: center;
}

.notas p {
  margin: 0 0 0 4px;
  color: var(--texto-caixa);
  white-space: pre-line;
}

/* ------------------------------------------------- a tabela site × celular × programa */

.tabela-rola {
  margin-left: 17px;
  overflow-x: auto;
}

.tabela-wlm {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  background: var(--fundo-caixa);
  border: 1px solid var(--borda-caixa);
}

.tabela-wlm caption {
  position: absolute;
  left: -9999px;
}

.tabela-wlm th,
.tabela-wlm td {
  padding: 8px 10px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--linha);
}

.tabela-wlm thead th {
  font-weight: 600;
  color: var(--titulo);
  /* o cabeçalho das colunas da lista de contatos (Aero claro) */
  background: linear-gradient(#fdfeff, #e3eefa);
  border-bottom-color: var(--linha-forte);
}

.tabela-wlm tbody th {
  font-weight: 400;
  color: var(--texto);
  width: 30%;
}

.tabela-wlm td {
  color: var(--texto-caixa);
  width: 23.3%;
}

.tabela-wlm td.sim {
  position: relative;
  padding-left: 30px;
  color: var(--sim);
}

.tabela-wlm td.sim::before {
  left: 10px;
  top: 11px;
}

.tabela-wlm td.nao {
  color: var(--nao);
}

.tabela-wlm .col-programa {
  background: rgba(126, 194, 240, 0.12);
}

.tabela-wlm thead .col-programa {
  background: linear-gradient(#eaf6fd, #bee6fd);
}

.linha-melhor th,
.linha-melhor td {
  font-weight: 600;
  border-bottom: 0;
}

/* ------------------------------------------------- segurança */

.seg-topo {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 8px 0 14px 17px;
}

.seg-topo .secao-apoio {
  margin: 0;
}

.escudo-secao {
  flex: none;
  filter: drop-shadow(0 4px 6px rgb(20 80 140 / 30%));
}

.caixas-seg {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.caixas-seg .caixa-wlm h3 {
  align-items: flex-start;
  line-height: 1.3;
}

.caixas-seg .caixa-wlm h3 img,
.caixas-seg .caixa-wlm h3 svg {
  flex: none;
  margin-top: 2px;
}

.caixa-wlm code,
.perguntas code {
  font: 13px Consolas, "Courier New", monospace;
  background: var(--codigo-fundo);
  border: 1px solid var(--codigo-borda);
  border-radius: 2px;
  padding: 0 3px;
}

.sha {
  margin: 16px 0 0 17px;
}

.sha h3 {
  margin: 0 0 6px;
  font-size: 18px;
  font-weight: 400;
  color: var(--titulo);
}

.tabela-sha {
  width: 100%;
  margin: 10px 0 6px;
  border-collapse: collapse;
  font-size: 13px;
}

.tabela-sha th,
.tabela-sha td {
  padding: 6px 8px 6px 0;
  text-align: left;
  vertical-align: top;
  border-top: 1px solid var(--linha);
}

.tabela-sha thead th {
  border-top: 0;
  color: var(--apagado);
  font-weight: 600;
}

.tabela-sha tbody th {
  font-weight: 400;
  color: var(--texto-caixa);
  white-space: nowrap;
}

.tabela-sha .hash {
  display: inline-block;
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: break-all;
  user-select: all;
}

.botao-copiar {
  min-height: 26px;
  padding: 0 10px;
  margin: 2px 0 0 4px;
  font-size: 12px;
  vertical-align: top;
}

.botao-copiar[hidden] {
  display: none;
}

.sha-como {
  margin: 12px 0 4px !important;
}

.comando {
  margin: 0;
  padding: 8px 10px;
  overflow-x: auto;
  background: #1e2a36;
  color: #e8f1fa;
  border-radius: 3px;
  font: 13px/1.4 Consolas, "Courier New", monospace;
}

.comando code {
  font: inherit;
  background: none;
  border: 0;
  padding: 0;
  color: inherit;
}

/* ------------------------------------------------- o aviso azul do Windows (desenhado aqui) */

.ss-porque {
  max-width: 62em;
}

.passos-ss {
  list-style: none;
  margin: 10px 0 0 17px;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.passos-ss li:last-child {
  grid-column: 1 / -1;
}

.passos-ss li:last-child > p {
  margin-top: 6px;
}

.passos-ss li > p {
  margin: 0 0 8px;
  color: var(--texto-caixa);
}

.passo-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  margin-right: 4px;
  border-radius: 50%;
  font-size: 13px;
  font-weight: 600;
  color: #fff;
  background: linear-gradient(#5aa8e0, #1f6aa8);
  border: 1px solid #1a5487;
}

.smartscreen {
  margin: 0;
}

/* a caixa de tela cheia do SmartScreen, em miniatura: azul, texto branco, botões no rodapé */
.ss-caixa {
  position: relative;
  min-height: 250px;
  padding: 22px 22px 64px;
  background: #1c5f9e;
  color: #fff;
  font-family: "Segoe UI", Tahoma, sans-serif;
  box-shadow: 0 6px 18px rgba(10, 30, 60, 0.35);
}

.ss-fechar {
  position: absolute;
  right: 12px;
  top: 8px;
  width: 14px;
  height: 14px;
}

.ss-fechar::before,
.ss-fechar::after {
  content: "";
  position: absolute;
  left: 6px;
  top: 0;
  width: 2px;
  height: 14px;
  background: #fff;
  transform: rotate(45deg);
}

.ss-fechar::after {
  transform: rotate(-45deg);
}

.ss-caixa p {
  margin: 0 0 10px;
}

.ss-titulo {
  font-size: 22px;
  font-weight: 300;
  line-height: 1.2;
}

.ss-texto {
  font-size: 13px;
  max-width: 34em;
}

.ss-link {
  display: inline-block;
  font-size: 13px;
  text-decoration: underline;
}

.ss-dados {
  margin: 0 0 6px;
  font-size: 13px;
}

.ss-dados div {
  display: flex;
  gap: 8px;
}

.ss-dados dt {
  min-width: 6.5em;
}

.ss-dados dd {
  margin: 0;
  overflow-wrap: anywhere;
}

.ss-botoes {
  position: absolute;
  right: 14px;
  bottom: 14px;
  left: 14px;
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px;
}

.ss-botao {
  display: inline-block;
  padding: 6px 16px;
  font-size: 13px;
  color: #fff;
  border: 2px solid #fff;
}

/* o que clicar: contorno amarelo, como um marca-texto */
.ss-destaque {
  outline: 3px solid var(--destaque);
  outline-offset: 3px;
  border-radius: 1px;
}

/* o aviso do navegador ao baixar (genérico, sem a cara de nenhum navegador) */
.nav-aviso {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 18px;
  align-items: center;
  margin: 24px 0 0 17px;
}

.nav-aviso h3 {
  margin: 0 0 6px;
  font-size: 18px;
  font-weight: 400;
  color: var(--titulo);
}

.nav-aviso p,
.nav-aviso li {
  color: var(--texto-caixa);
}

.nav-aviso ul {
  margin: 6px 0 0;
  padding-left: 20px;
}

.navegador-aviso {
  margin: 0;
}

.nav-caixa {
  max-width: 380px;
  margin-left: auto;
  padding: 12px 14px;
  background: #fff;
  border: 1px solid #c8c8c8;
  border-radius: 8px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
  color: #202124;
  font-size: 13px;
}

.nav-linha {
  display: flex;
  gap: 8px;
  align-items: flex-start;
}

.nav-linha img {
  flex: none;
  margin-top: 2px;
}

.nav-linha p {
  margin: 0;
  overflow-wrap: anywhere;
}

.nav-botoes {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 12px;
}

.nav-botao {
  padding: 5px 14px;
  border: 1px solid #c8c8c8;
  border-radius: 14px;
  color: #1a5fb4;
  background: #fff;
}

.antivirus {
  margin: 20px 0 0 17px;
}

/* ------------------------------------------------- requisitos e fim */

.requisitos svg {
  flex: none;
  margin-top: 2px;
}

.final-acoes {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
}

.final-apoio {
  color: var(--apagado);
}

/* ------------------------------------------------- telas menores */

@media (max-width: 960px) {
  .heroi-baixar {
    grid-template-columns: minmax(0, 1fr);
  }

  .downloads,
  .caixas-seg {
    grid-template-columns: minmax(0, 1fr);
  }

  .passos-ss,
  .nav-aviso {
    grid-template-columns: minmax(0, 1fr);
  }

  .nav-caixa {
    margin-left: 0;
  }
}

@media (max-width: 640px) {
  .heroi-baixar h1 {
    font-size: 30px;
  }

  .aviso-do-sistema {
    margin-left: 0;
  }

  .downloads,
  .notas,
  .tabela-rola,
  .seg-topo,
  .passos-ss,
  .nav-aviso {
    margin-left: 0;
    padding-left: 0;
  }

  /* as caixas (SHA-256, antivírus) só encostam na margem; o recheio continua */
  .sha,
  .antivirus {
    margin-left: 0;
  }

  .confianca h2 {
    margin-left: 70px;
    font-size: 20px;
  }

  .escudo-grande {
    width: 56px;
    height: 63px;
  }

  .confianca ul,
  .confianca p {
    margin-left: 0;
  }

  .confianca ul {
    margin-top: 14px;
  }

  .escudo-secao {
    width: 64px;
    height: 72px;
  }

  /* a tabela vira cartões: cada recurso com os três valores embaixo */
  .tabela-wlm thead {
    position: absolute;
    left: -9999px;
  }

  .tabela-wlm,
  .tabela-wlm tbody,
  .tabela-wlm tr,
  .tabela-wlm th,
  .tabela-wlm td {
    display: block;
    width: auto;
  }

  .tabela-wlm tr {
    padding: 8px 10px;
    border-bottom: 1px solid var(--linha);
  }

  .tabela-wlm tbody th {
    width: auto;
    padding: 0 0 4px;
    font-weight: 600;
    color: var(--titulo);
    border: 0;
  }

  .tabela-wlm td {
    position: relative;
    padding: 2px 0 2px 88px;
    border: 0;
    background: none;
  }

  .tabela-wlm td::after {
    position: absolute;
    left: 0;
    top: 2px;
    width: 82px;
    color: var(--apagado);
    font-weight: 400;
  }

  .tabela-wlm td.sim {
    padding-left: 108px;
  }

  .tabela-wlm td.sim::before {
    left: 88px;
    top: 6px;
  }

  .tabela-wlm .col-programa {
    background: none;
  }

  .tabela-sha thead {
    display: none;
  }

  .tabela-sha,
  .tabela-sha tbody,
  .tabela-sha tr,
  .tabela-sha th,
  .tabela-sha td {
    display: block;
  }

  .tabela-sha tr {
    padding: 6px 0;
    border-top: 1px solid var(--linha);
  }

  .tabela-sha th,
  .tabela-sha td {
    border: 0;
    padding: 0;
  }

  .tabela-sha tbody th {
    white-space: normal;
    overflow-wrap: anywhere;
    font-weight: 600;
  }

  .ss-caixa {
    min-height: 0;
    padding: 18px 16px 70px;
  }

  .ss-titulo {
    font-size: 19px;
  }

  .final-acoes .botao-aero {
    flex: 1 1 100%;
    min-height: 44px;
  }
}

/* os rótulos das colunas no celular (a tabela em cartões): o data-rotulo de cada célula */
@media (max-width: 640px) {
  .tabela-wlm td[data-rotulo]::after {
    content: attr(data-rotulo);
  }
}

/* ------------------------------------------------- modo escuro (o do sistema) */

@media (prefers-color-scheme: dark) {
  .pagina-baixar {
    --titulo: #cfe3f7;
    --azul-grupo: #9cc7ee;
    --conta: #7f9bbb;
    --texto: #e6edf4;
    --apagado: #a9b8c7;
    --link: #79b8f2;
    --borda-caixa: #33516f;
    --fundo: #0f1b29;
    --fundo-caixa: #16263a;
    --fundo-suave: #172a40;
    --linha: #26405c;
    --linha-forte: #3b5f84;
    --texto-caixa: #d6e0ea;
    --codigo-fundo: #0f1b29;
    --codigo-borda: #33516f;
    --sim: #8fd36d;
    --nao: #6f8296;
    color: var(--texto);
  }

  .pagina-baixar .pular {
    background: var(--fundo-caixa);
  }

  /* o céu da lista à noite: a mesma arte, escurecida, sumindo no fundo */
  .pagina-baixar .topo {
    background-color: var(--fundo);
  }

  .pagina-baixar .topo::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(8, 20, 34, 0.72);
    pointer-events: none;
  }

  .pagina-baixar .topo::after {
    background: linear-gradient(rgba(15, 27, 41, 0), var(--fundo));
  }

  .pagina-baixar .heroi-apoio {
    color: #c3d3e3;
  }

  /* o logo do Messenger tem letras escuras: no escuro ganha uma plaquinha clara por trás */
  .pagina-baixar .heroi-logo {
    box-sizing: content-box;
    padding: 6px 10px;
    margin-left: -10px;
    border-radius: 6px;
    background: rgba(234, 244, 253, 0.92);
  }

  .pagina-baixar .topo-links a:not(.botao-aero):hover {
    border-color: #3b5f84;
    background: linear-gradient(#1d3450, #16263a);
  }

  .pagina-baixar .botao-aero {
    color: #f0f6fc;
    border-color: #4d6f92;
    background: linear-gradient(#2b4562 0%, #233a54 45%, #1c3148 50%, #182a3e 100%);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
  }

  .pagina-baixar .botao-aero:hover {
    border-color: #79b8f2;
    background: linear-gradient(#335a80 0%, #2c5072 45%, #24465f 50%, #1f3d55 100%);
  }

  .pagina-baixar .botao-principal {
    border-color: #79b8f2;
    box-shadow:
      inset 0 0 0 1px rgba(255, 255, 255, 0.1),
      inset 0 0 0 2px #2f6fa6;
  }

  .pagina-baixar .caixa-wlm,
  .pagina-baixar .download {
    background: var(--fundo-caixa);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
  }

  .pagina-baixar .caixa-wlm p {
    color: var(--texto-caixa);
  }

  .pagina-baixar .confianca {
    background: linear-gradient(#1a2e46, #16263a);
  }

  .pagina-baixar .grupo {
    border-bottom-color: var(--linha);
  }

  .pagina-baixar .contatos strong {
    color: var(--texto);
  }

  .pagina-baixar .contatos li:hover {
    border-image: none;
    border-color: #2b4a6b;
    background: #172a40;
  }

  .pagina-baixar .tabela-wlm thead th {
    background: linear-gradient(#1d3450, #172a40);
  }

  .pagina-baixar .tabela-wlm thead .col-programa {
    background: linear-gradient(#24476b, #1d3a58);
  }

  .pagina-baixar .tabela-wlm .col-programa {
    background: rgba(121, 184, 242, 0.08);
  }

  .pagina-baixar .aviso-forte {
    background: #3a3214;
    border-color: #7a6a2a;
    color: #f5e7a8;
  }

  .pagina-baixar .perguntas details {
    border-bottom-color: var(--linha);
  }

  .pagina-baixar .perguntas summary:hover {
    color: #e6f1fb;
  }

  .pagina-baixar .perguntas details p {
    color: var(--texto-caixa);
  }

  .pagina-baixar .perguntas summary::before,
  .pagina-baixar .grupo::before {
    filter: invert(0.75) hue-rotate(180deg);
  }

  .pagina-baixar .chamada-final {
    background:
      linear-gradient(rgba(15, 27, 41, 0.75), rgba(15, 27, 41, 0.95)),
      url("/wlm/interface/4000_182_0.png") center top / 100% 100% no-repeat #0f1b29;
  }

  .pagina-baixar .rodape {
    background: linear-gradient(#132235, #0d1826);
    border-top-color: #26405c;
    color: #a9b8c7;
  }

  .pagina-baixar .rodape-aviso {
    color: #8fa1b4;
  }

  .pagina-baixar .ss-caixa {
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.55);
  }

  .pagina-baixar .nav-caixa {
    background: #26292d;
    border-color: #4a4f55;
    color: #e8eaed;
  }

  .pagina-baixar .nav-botao {
    background: #26292d;
    border-color: #5f6368;
    color: #8ab4f8;
  }
}