/* =========================================================================
   Quem Somos - estilos exclusivos da pagina
   Mockup: "05 Quem Somos/Pagina Quem somos.png" (1915x4089)

   As medidas entre parenteses sao as do mockup em 1920px; os valores
   aplicados sao elas x 0,75 (referencia de 1440px), como no site.css.

   Esta e a unica tela com a paleta da Fanny's: bronze, bege e o azul
   #003E7B. Os tokens ja existem no site.css.

   Ordem das medias queries: sempre do MAIOR para o menor.
   ========================================================================= */


/* Variantes de marca usadas so aqui - por isso moram nesta folha, e nao no
   site.css junto dos botoes do Acadesc. */
.botao--bronze {
  background: var(--bronze);
  color: var(--branco);
}

.botao--bronze:hover,
.botao--bronze:focus-visible {
  background: var(--azul);
  color: var(--branco);
}

.destaque-bronze { color: var(--bronze); }


/* =========================================================================
   1. Banner
   Mockup: y 139..696 (557 -> 418). A imagem sangra de ponta a ponta e manda
   na altura da faixa; o texto fica por cima, ancorado ao container.
   ========================================================================= */

.qs-banner {
  position: relative;
  background: var(--azul);
}

.qs-banner__fundo {
  display: block;
  width: 100%;
  height: auto;
}

.qs-banner__interno {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
}

.qs-banner__sobretitulo {
  font-family: var(--fonte-titulo);
  font-weight: 700;
  font-size: 18px;  /* (24) */
  line-height: 1.2;
  color: var(--branco);
  margin-bottom: .9em;
}

/* A 32px a linha "Tecnologia que conecta." fecha em 436, que e a medida do
   mockup (581 x 0,75). Corpo proprio pelo mesmo motivo das outras telas: o
   Poppins do Google renderiza mais largo que o do mockup. */
.qs-banner__titulo {
  font-size: 32px;  /* (50) */
  line-height: 1.32;
  color: var(--branco);
  margin-bottom: 22px;  /* (29) */
}

.qs-banner__titulo-2 { color: var(--bronze); }

.qs-banner__resumo {
  max-width: 575px;  /* (767) */
  text-align: justify;
  color: var(--branco);
  margin-bottom: 30px;  /* (40) */
}

.qs-banner__cta {
  min-width: 210px;  /* (280) */
  min-height: 49px;  /* (65)  */
  font-size: var(--fs-h4);
}


/* =========================================================================
   2. Areas de atuacao - as quatro bolinhas
   Mockup: y 696..1218 (522 -> 392). Titulo centralizado e quatro colunas.
   ========================================================================= */

.qs-areas { padding-block: 26px 52px; }

.qs-areas__titulo {
  text-align: center;
  font-size: var(--fs-h2);
  color: var(--azul);
  margin-bottom: 60px;
}

.qs-areas__lista {
  display: flex;
  justify-content: center;
  gap: 60px;  /* (80) */
  list-style: none;
  margin: 0;
  padding: 0;
}

.qs-area {
  flex: 0 1 262px;  /* (349, a coluna mais larga do mockup) */
  text-align: center;
}

/* O `margin-inline: auto` e obrigatorio, nao decorativo: o site.css declara
   `img { display: block }`, e bloco nao obedece a text-align do pai. Sem ele
   os quatro icones ficavam encostados na esquerda das colunas. */
.qs-area__icone {
  width: auto;
  height: 116px;  /* (155) */
  margin: 0 auto 20px;  /* (27) */
}

.qs-area__titulo {
  font-family: var(--fonte-titulo);
  font-weight: 700;
  font-size: var(--fs-corpo);
  line-height: 1.3;
  color: var(--azul);
  margin: 0 0 .35em;
}

.qs-area__texto {
  font-size: var(--fs-pequeno);
  line-height: 1.45;
  color: var(--texto-suave);
  margin: 0;
}


/* =========================================================================
   3. Sistemas - o painel cinza com o video
   Mockup: y 1219..2034 (816 -> 612). Painel na largura do container, player
   de 707x426 a esquerda e a lista dos quatro sistemas a direita.
   ========================================================================= */

/* As folgas do painel saem do mockup: do topo dele ate a chamada sao 39 (29),
   da chamada ate o player 56 (42) e do player ate a base 124 (93). */
.qs-sistemas { padding-bottom: 0; }

.qs-sistemas__painel {
  background: var(--seccao-cinza);
  padding: 29px 71px 93px;  /* (39 / 95 / 124) */
}

.qs-sistemas__chamada {
  font-family: var(--fonte-titulo);
  font-weight: 700;
  font-size: var(--fs-h4);
  color: var(--azul);
  text-align: right;
  margin: 0 0 42px;  /* (56) */
}

.qs-sistemas__grade {
  display: flex;
  align-items: flex-start;
  gap: 50px;  /* (67) */
}

/* 707x426 e a caixa do mockup, que inclui a barra de titulo do YouTube.
   O iframe em si e 16:9 dentro dela. */
.qs-sistemas__quadro {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 707px;   /* (943) */
  aspect-ratio: 16 / 9;
  background: var(--navy);
  overflow: hidden;
}

.qs-sistemas__quadro iframe {
  width: 100%;
  height: 100%;
  border: 0;
}

.qs-sistemas__espera {
  color: var(--branco);
  font-family: var(--fonte-titulo);
  font-size: var(--fs-h4);
  margin: 0;
}

.qs-sistemas__lista {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 33px;  /* (45) */
  list-style: none;
  margin: 0;
  padding: 0;
}

.qs-sistema__botao {
  display: flex;
  align-items: center;
  gap: 20px;  /* (27) */
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  text-align: left;
  cursor: pointer;
}

.qs-sistema__botao--espera { cursor: default; }

/* O botao de play e desenhado, nao e imagem: quadrado bronze com o triangulo
   branco no meio, como no mockup. */
.qs-sistema__play {
  flex-shrink: 0;
  position: relative;
  width: 80px;   /* (106) */
  height: 80px;
  background: var(--bronze);
  transition: background .2s;
}

.qs-sistema__play::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 54%;
  transform: translate(-50%, -50%);
  border-style: solid;
  border-width: 15px 0 15px 24px;
  border-color: transparent transparent transparent var(--branco);
}

.qs-sistema__botao:hover .qs-sistema__play,
.qs-sistema__botao:focus-visible .qs-sistema__play { background: var(--azul); }

.qs-sistema__texto { display: block; }

.qs-sistema__nome {
  display: block;
  font-family: var(--fonte-titulo);
  font-weight: 700;
  font-size: var(--fs-h4);
  line-height: 1.3;
  color: var(--azul);
}

.qs-sistema__descricao {
  display: block;
  font-size: var(--fs-corpo);
  line-height: 1.3;
  color: var(--texto);
}


/* =========================================================================
   4. Sobre a Fanny's + missao, visao, valores e colaboradores
   Mockup: y 2035..3050 (1015 -> 761).
   ========================================================================= */

.qs-sobre { padding-block: 71px 101px; }

.qs-sobre__interno {
  display: flex;
  align-items: flex-start;
  gap: 32px;  /* (42) */
}

/* No mockup o cartao mede 925x825 (694x619) - 52% do container. A medida vai
   em porcentagem para a coluna de texto de dentro nao espremer abaixo de
   1400, que era o que fazia o titulo quebrar em duas linhas. As folgas de
   dentro tambem sao de la: 75 do topo ate o circulo (56), 108 do fim do texto
   ate os selos (81) e 118 dos selos ate a base (89). O respiro grande embaixo
   e do desenho, nao sobra: e ele que faz o cartao acompanhar a altura dos
   quatro blocos ao lado. */
.qs-cartao {
  flex: 0 0 52%;  /* 694 de 1335 */
  border: 1px solid #D1D1D1;
  border-radius: 18px;
  padding: 56px 31px 89px;  /* (75 / 41 / 118) */
}

.qs-cartao__topo {
  display: flex;
  align-items: flex-start;
  gap: 22px;  /* (29) */
}

/* O circulo com os anos. No mockup e "32 ANOS"; aqui e "+30 ANOS", pela regra
   de nunca informar a idade exata. */
.qs-cartao__anos {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 235px;   /* (313) */
  height: 235px;
  border: 12px solid var(--bronze);
  border-radius: 50%;
  color: var(--azul);
  margin: 0;
}

/* No mockup corrigido o "30" mede 74 de altura e o "ANOS" 34 - dai os corpos.
   O "+" e sobrescrito, colado no canto de cima do 30. */
.qs-cartao__numero {
  font-family: var(--fonte-titulo);
  font-weight: 700;
  font-size: 100px;
  line-height: 1;
}

.qs-cartao__numero sup {
  font-size: .42em;
  top: -.55em;
}

.qs-cartao__rotulo {
  text-transform: uppercase;
  font-family: var(--fonte-titulo);
  font-weight: 700;
  font-size: 47px;
  line-height: 1.1;
}

.qs-cartao__titulo {
  text-transform: uppercase;
  font-size: var(--fs-h4);
  color: var(--azul);
  margin-bottom: .8em;
}

.qs-cartao__texto p {
  font-size: var(--fs-pequeno);
  line-height: 1.45;
  color: var(--texto);
}

.qs-cartao__selos {
  display: flex;
  gap: 20px;
  list-style: none;
  margin: 71px 0 0;  /* (95) */
  padding: 0;
}

.qs-cartao__selos li {
  flex: 1 1 0;
  text-align: center;
}

.qs-cartao__selos img {
  width: auto;
  height: 77px;  /* (102) */
  margin: 0 auto 8px;   /* auto pelo mesmo motivo dos icones das areas */
}

.qs-cartao__selo-numero {
  font-family: var(--fonte-titulo);
  font-weight: 700;
  font-size: var(--fs-corpo);
  line-height: 1.2;
  color: var(--azul);
  margin: 0;
}

.qs-cartao__selo-texto {
  font-size: var(--fs-pequeno);
  line-height: 1.3;
  color: var(--texto-suave);
  margin: 0;
}


/* --- Missao, visao, valores e colaboradores, em duas colunas ------------- */

.qs-blocos {
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 40px 50px;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* No mockup o icone fica AO LADO do titulo, e o texto desce alinhado com o
   titulo - nao embaixo do icone. A grade de duas colunas resolve isso sem
   depender da largura de cada icone, que varia (o olho da visao e bem mais
   largo que o alvo da missao). */
.qs-bloco {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  column-gap: 21px;  /* (28) */
  row-gap: 12px;
}

.qs-bloco__icone {
  grid-column: 1;
  grid-row: 1;
  width: auto;
  height: 66px;  /* (88) */
}

.qs-bloco__titulo {
  grid-column: 2;
  grid-row: 1;
  text-transform: uppercase;
  font-size: var(--fs-h4);
  color: var(--bronze);
  margin: 0;
}

.qs-bloco__texto {
  grid-column: 2;
  grid-row: 2;
  font-size: var(--fs-pequeno);
  line-height: 1.45;
  color: var(--texto);
  margin: 0;
}

.qs-bloco__lista {
  grid-column: 2;
  grid-row: 2;
  list-style: none;
  margin: 0;
  padding: 0;
}

.qs-bloco__lista li {
  position: relative;
  padding-left: 20px;
  font-size: var(--fs-pequeno);
  line-height: 1.45;
  color: var(--texto);
  margin-bottom: .35em;
}

.qs-bloco__lista li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: .55em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--bronze);
}


/* =========================================================================
   5. Colaboramos com
   Mockup: y 3071..3371 (300 -> 225). Painel bege a esquerda, logos a direita.
   ========================================================================= */

.qs-colaboramos { padding-bottom: 93px; }

.qs-colaboramos__painel {
  display: flex;
  align-items: stretch;
  border: 1px solid #E3E6EB;
}

.qs-colaboramos__texto {
  flex: 0 0 46.6%;  /* (835 de 1793) */
  display: flex;
  align-items: center;
  gap: 24px;
  background: var(--bege);
  padding: 26px 34px;
}

.qs-colaboramos__icone {
  flex-shrink: 0;
  width: auto;
  height: 150px;  /* (200) */
}

.qs-colaboramos__titulo {
  display: block;
  width: auto;
  height: 76px;  /* (102) */
  margin-bottom: 6px;
}

.qs-colaboramos__texto p {
  font-size: var(--fs-pequeno);
  line-height: 1.45;
  color: var(--texto);
  margin: 0;
}

.qs-colaboramos__logos {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  gap: 40px;
  list-style: none;
  margin: 0;
  padding: 20px 40px;
  background: var(--branco);
}

.qs-colaboramos__logos img {
  width: auto;
  max-width: 100%;
  height: 84px;  /* (112) */
}


/* =========================================================================
   6. Pilares
   Mockup: y 3376..3800. Quatro cartoes de 276, com 48 de calha.
   ========================================================================= */

.qs-pilares { padding-bottom: 49px; }

.qs-pilares__lista {
  display: flex;
  justify-content: center;
  gap: 48px;  /* (64) */
  list-style: none;
  margin: 0;
  padding: 0;
}

.qs-pilar {
  flex: 0 1 276px;  /* (368) */
}

.qs-pilar__foto {
  display: block;
  width: 100%;
  height: auto;
  margin-bottom: 33px;  /* (44) */
}

.qs-pilar__titulo {
  font-family: var(--fonte-titulo);
  font-weight: 700;
  font-size: var(--fs-corpo);
  line-height: 1.3;
  color: var(--bronze);
  margin: 0 0 5px;  /* (7) */
}

.qs-pilar__texto {
  font-size: var(--fs-pequeno);
  line-height: 1.4;
  color: var(--texto);
  margin: 0;
}


/* =========================================================================
   7. Encerramento
   Mockup: y 3860..4089 (229 -> 172). Faixa azul da Fanny's, com a arte das
   curvas ja embutida no arquivo. Mesma montagem do banner: a imagem manda na
   altura e o texto fica por cima.
   ========================================================================= */

.qs-encerramento {
  position: relative;
  background: var(--azul-fannys);
}

.qs-encerramento__fundo {
  display: block;
  width: 100%;
  height: auto;
}

.qs-encerramento__interno {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.qs-encerramento__logo {
  width: auto;
  height: 62px;   /* a URL da logo sai com ~10px */
  margin-bottom: 14px;
}

.qs-encerramento__linha {
  font-family: var(--fonte-titulo);
  font-weight: 700;
  font-size: var(--fs-h4);
  line-height: 1.5;
  color: var(--branco);
  margin: 0;
}


/* =========================================================================
   8. Responsivo - do maior para o menor
   ========================================================================= */

@media (max-width: 1399.98px) {

  .qs-sistemas__painel { padding-inline: 40px; }

  .qs-sistemas__quadro { width: 620px; }
}


@media (max-width: 1199.98px) {

  .qs-banner__titulo { font-size: 28px; }

  .qs-areas__lista { flex-wrap: wrap; gap: 40px; }

  .qs-area { flex: 0 1 calc(50% - 20px); }

  /* O player nao cabe mais ao lado da lista: passa a ocupar a largura toda e
     a lista desce para baixo dele, em duas colunas. */
  .qs-sistemas__grade { flex-direction: column; }

  .qs-sistemas__quadro { width: 100%; }

  .qs-sistemas__lista {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 26px 30px;
    width: 100%;
  }

  .qs-sobre__interno { flex-direction: column; }

  .qs-cartao { flex: 0 0 auto; width: 100%; }

  .qs-blocos { width: 100%; }

  .qs-colaboramos__painel { flex-direction: column; }

  .qs-colaboramos__texto { flex: 0 0 auto; }

  .qs-pilares__lista { flex-wrap: wrap; }

  .qs-pilar { flex: 0 1 calc(50% - 24px); }
}


/* --- Tablet: o banner e o encerramento sao largos demais para caber com a
       proporcao do arquivo - passam a ter altura propria, com a imagem
       preenchendo e o excesso cortado nas laterais. -------------------- */
@media (max-width: 991.98px) {

  .qs-banner__fundo {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: right center;
  }

  .qs-banner__interno {
    position: relative;
    inset: auto;
    padding-block: 46px;
    background: linear-gradient(90deg, rgba(18, 58, 99, .92) 55%, rgba(18, 58, 99, .55));
  }

  .qs-encerramento__fundo {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .qs-encerramento__interno {
    position: relative;
    inset: auto;
    padding-block: 40px;
  }

  .qs-cartao__topo { flex-direction: column; align-items: center; text-align: center; }

  .qs-colaboramos__logos { padding-block: 30px; }
}


@media (max-width: 767.98px) {

  .qs-banner__titulo { font-size: 25px; }

  .qs-banner__resumo { text-align: left; }

  .qs-banner__cta { width: 100%; }

  .qs-areas__lista { flex-direction: column; gap: 34px; }

  .qs-area { flex: 0 1 auto; }

  .qs-sistemas__painel { padding-inline: 22px; }

  .qs-sistemas__chamada { text-align: left; }

  .qs-sistemas__lista { grid-template-columns: 1fr; }

  .qs-blocos { grid-template-columns: 1fr; }

  .qs-cartao__selos { flex-wrap: wrap; }

  .qs-cartao__selos li { flex: 0 1 calc(50% - 10px); }

  .qs-colaboramos__texto { flex-direction: column; text-align: center; }

  .qs-pilares__lista { flex-direction: column; }

  .qs-pilar { flex: 0 1 auto; }
}