/* ==========================================================================
   Grupo DIS Comércio — componentes exclusivos desta página

   Este site é o único dos três que não é institucional: ele apresenta o grupo
   e encaminha o visitante para a UNIS ou para a Bonshop. Os componentes daqui
   (a seção "Sobre nós" com foto sangrada, os selos das marcas e os canais de
   contato) não existem nos outros dois sites.

   Ficam num arquivo à parte de propósito: `site.css` e `tokens.css` precisam
   continuar byte a byte idênticos aos dos sites já publicados — é o que o
   ferramentas/conferir-sincronia.sh verifica. Carregar este arquivo DEPOIS de
   site.css é o que permite as poucas sobrescritas abaixo.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Cabeçalho
   -------------------------------------------------------------------------- */

/* A assinatura "DiS Comércio S/A" é mais alta que as das marcas (tem a linha
   COMÉRCIO S/A sob o símbolo): nos 38px padrão essa linha some. */
.marca img { height: 50px; }

/* Menu centralizado, como no layout de referência. */
@media (min-width: 961px) {
  .menu { margin-inline: auto; }
}

.cabecalho__divisor {
  width: 1px;
  height: 26px;
  margin-inline: .35rem .1rem;
  background: var(--linha-forte);
}

/* LinkedIn e WhatsApp são glifos fechados; o traçado do .icone-link é para
   ícones de linha, como o do Instagram. */
.icone-link--solido svg {
  fill: currentColor;
  stroke: none;
}

@media (max-width: 960px) {
  .cabecalho__divisor { display: none; }
  .marca img { height: 42px; }
}

/* --------------------------------------------------------------------------
   2. Sobre nós
   -------------------------------------------------------------------------- */

.sobre-dis {
  position: relative;
  overflow: hidden;
  /* respiro menor que o das outras seções de propósito: o banner é panorâmico
     (3:1) e, quanto mais alta a seção, mais o `cover` amplia a imagem — as
     faixas azuis engordam e o aparelho sai de escala. */
  padding-block: clamp(3.25rem, 5.5vw, 5rem);
  /* mesma cor do fundo do banner (amostrada do arquivo): o que sobra da imagem
     em telas muito largas ou muito altas emenda sem costura visível */
  background: #f4f4f6;
}

.sobre-dis .container { position: relative; z-index: 1; }

/* O banner desta página é o único que não é compartilhado com os outros sites:
   ele foi produzido com a metade esquerda vazia justamente para receber o texto,
   então ocupa a seção inteira, e não uma coluna. */
.sobre-dis__figura {
  position: absolute;
  inset: 0;
  margin: 0;
}
.sobre-dis__figura img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* ancorada à direita: é onde ficam o aparelho e os grafismos azuis */
  object-position: 100% 50%;
}

/* Véu à esquerda: em telas altas ou estreitas o corte aproxima o aparelho da
   coluna de texto, e é ele que segura o contraste da leitura. */
.sobre-dis__figura::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    95deg,
    #f4f4f6 0%,
    rgba(244, 244, 246, .96) 26%,
    rgba(244, 244, 246, .62) 42%,
    rgba(244, 244, 246, 0) 60%
  );
}

.sobre-dis__texto { max-width: min(50%, 34rem); }
.sobre-dis__texto h1 { margin-bottom: 1.75rem; }
.sobre-dis__texto p + p { margin-top: 1.25rem; }
.sobre-dis__acao { margin-top: 2.25rem; }

@media (max-width: 900px) {
  .sobre-dis {
    display: flex;
    flex-direction: column;
    gap: clamp(2.25rem, 6vw, 3rem);
    padding-bottom: 0;
    overflow: visible;
  }
  .sobre-dis .container { order: 1; }
  .sobre-dis__texto { max-width: none; }

  .sobre-dis__figura {
    position: static;
    order: 2;
    width: calc(100% - 2 * var(--respiro));
    margin-inline: auto;
  }
  .sobre-dis__figura::after { display: none; }
  .sobre-dis__figura img {
    height: auto;
    aspect-ratio: 16 / 9;
    /* no quadro do mobile o banner é recortado: 88% mantém o aparelho inteiro
       e uma faixa dos grafismos, sem espremer os dois na borda */
    object-position: 88% 50%;
    border: 1px solid var(--linha);
    border-radius: var(--raio-grande);
  }
}

/* --------------------------------------------------------------------------
   3. Selos das marcas
   -------------------------------------------------------------------------- */

.grade-selo {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(1rem, 2.5vw, 1.75rem);
}

.selo { display: flex; }

.selo__link {
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: clamp(1.5rem, 3vw, 2.25rem) clamp(1.5rem, 3vw, 2.5rem) clamp(1.75rem, 3vw, 2.5rem);
  border: 1px solid var(--linha);
  border-radius: var(--raio-grande);
  background: #fff;
  color: inherit;
  text-decoration: none;
  transition: border-color var(--transicao), transform var(--transicao),
              box-shadow var(--transicao);
}
.selo__link:hover {
  border-color: var(--linha-forte);
  color: inherit;
  transform: translateY(-3px);
  box-shadow: var(--sombra-alta);
}

/* Assinaturas das marcas: sem recolorir e sem alterar proporções. */
.selo__moldura {
  display: grid;
  place-items: center;
  height: clamp(104px, 11vw, 136px);
  margin-bottom: clamp(1.25rem, 2.5vw, 1.75rem);
  border-bottom: 1px solid var(--linha);
}
.selo__moldura img {
  width: auto;
  max-width: 80%;
  object-fit: contain;
}
/* Alturas diferentes por ajuste ótico: a assinatura da Bonshop é bem mais
   larga que a da UNIS, e com a mesma altura pareceria dominar o par. */
.selo__logo--unis    { max-height: clamp(52px, 5.5vw, 68px); }
.selo__logo--bonshop { max-height: clamp(40px, 4.4vw, 54px); }

.selo__corpo {
  display: flex;
  flex: 1;
  flex-direction: column;
}

.selo__titulo {
  color: var(--tinta);
  font-size: 1.0625rem;
  font-weight: var(--peso-forte);
  letter-spacing: -.012em;
}
.selo__texto {
  margin-top: .65rem;
  max-width: 34ch;
  font-size: var(--t-pequeno);
}

/* margin-top:auto alinha a linha de ação dos dois cards. */
.selo__acao {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  margin-top: auto;
  padding-top: clamp(1.5rem, 2.5vw, 2rem);
  color: var(--acao);
  font-size: var(--t-pequeno);
  font-weight: var(--peso-forte);
}
.selo__acao span { transition: transform var(--transicao); }
.selo__link:hover .selo__acao { color: var(--acao-forte); }
.selo__link:hover .selo__acao span { transform: translateX(4px); }

@media (max-width: 780px) { .grade-selo { grid-template-columns: 1fr; } }

/* --------------------------------------------------------------------------
   4. Fale conosco (dentro da faixa azul)
   -------------------------------------------------------------------------- */

/* A faixa é o último bloco do main e o rodapé vem logo abaixo. No azul-escuro
   padrão os dois se fundiam num único bloco. Aqui ela usa o **azul-violeta** do
   manual, que separa as duas áreas sem sair da paleta.

   Consequência: o azul-claro (--detalhe) rende só 3:1 sobre o violeta e deixa de
   servir para texto. Por isso, dentro desta faixa, rótulos e links vão em branco. */
.faixa {
  padding-bottom: clamp(2.75rem, 5vw, 4rem);
  background: var(--dis-azul-violeta);
  color: rgba(255, 255, 255, .78);
}
/* O grafismo é traçado em azul-claro sobre azul-escuro: sobre o violeta ele
   praticamente some, e o brilho o traz de volta ao mesmo peso visual. */
.faixa::before { filter: brightness(1.8); }

.faixa__topo { margin-bottom: clamp(2.5rem, 5vw, 3.5rem); }
.faixa__topo h2 { color: #fff; }
.faixa__topo .sobrancelha { color: rgba(255, 255, 255, .82); }

.grade-canais {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(2rem, 4vw, 3.25rem);
}

.canal { display: flex; flex-direction: column; }
.canal h3 { margin-bottom: .6rem; color: #fff; font-weight: var(--peso-forte); }
.canal p { max-width: 30ch; font-size: var(--t-pequeno); }

.canal__icone {
  display: grid;
  place-items: center;
  width: 46px; height: 46px;
  margin-bottom: 1.35rem;
  border: 1px solid rgba(255, 255, 255, .42);
  border-radius: 999px;
  color: #fff;
}
.canal__icone svg {
  width: 22px; height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* o primeiro link encosta no texto; os seguintes ficam empilhados */
.canal__link {
  margin-top: 1.15rem;
  color: #fff;
}
.canal__link + .canal__link { margin-top: .65rem; }
.canal__link:hover { color: #fff; text-decoration: underline; }
.faixa :focus-visible { outline-color: #fff; }

@media (max-width: 900px) { .grade-canais { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .grade-canais { grid-template-columns: 1fr; } }

/* --------------------------------------------------------------------------
   5. Rodapé
   -------------------------------------------------------------------------- */

/* Sem filete: a troca de cor entre a faixa e o rodapé já faz a separação. */
.rodape { padding-top: clamp(2.75rem, 5vw, 4rem); }

/* A placa branca do rodapé segue a mesma decisão dos outros sites: o pacote de
   logos não traz versão negativa desta assinatura (Manual, itens 1.1 e 2.1). */
.placa--dis { padding: .8rem 1.1rem; }
.placa--dis img { height: 45px; }