/* =========================================================================
   Sistema de Bibliotecas - estilos exclusivos da pagina
   Mockup: "04 Libweb/Pagina Acadesc Libweb.png" (1915x1675)

   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.

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


/* =========================================================================
   1. Banner de abertura
   Mockup: y 139..970 (832 -> 624). Texto a esquerda, bibliotecaria a direita
   sobre fundo branco - esta tela nao tem arte no canto, ao contrario do
   Diario do Professor.
   ========================================================================= */

.lw-hero {
  position: relative;
  overflow-x: clip;   /* a foto vaza do container e e cortada aqui */
  background: var(--branco);
}

.lw-hero__interno {
  position: relative;
  z-index: 1;
  padding-block: 38px 51px;  /* (46 / 55, ajustados - ver a nota do paragrafo) */
}

/* O nome do produto, em caixa alta. Nesta tela ele tem o MESMO corpo do titulo
   (no mockup os dois medem 53px), diferente do sobretitulo do Diario, que e
   pequeno.

   O corpo saiu da largura da linha, nao do numero do mockup: a 36px a linha em
   caixa alta fecha em 653 (mockup 672) e a do titulo em 688 (mockup 675) -
   os dois dentro de 3%. E o mesmo acerto do h1 da Acadesc Web e do Diario, por
   causa do Poppins do Google renderizar mais largo que o do mockup. */
.lw-hero__sobretitulo {
  text-transform: uppercase;
  font-family: var(--fonte-titulo);
  font-weight: 700;
  font-size: 36px;  /* (50) */
  /* A entrelinha e menor que a do titulo de proposito: no mockup a distancia
     do sobretitulo para a 1a linha do titulo (55) e MENOR que a distancia
     entre as duas linhas do titulo (60). */
  line-height: 1.13;
  color: var(--navy);
  margin-bottom: 0;
}

.lw-hero__titulo {
  font-size: 36px;  /* (50) */
  line-height: 1.25;
  margin-bottom: 28px;  /* (24 no mockup - ver a nota abaixo) */
}

/* O paragrafo do mockup fecha em QUATRO linhas nesta largura; no navegador o
   Roboto renderiza mais estreito e ele fecha em TRES. E a mesma diferenca do
   Diario (7 linhas no mockup, 5 no site) e foi aceita la.

   Os ~24px que sobram voltam distribuidos nos respiros deste bloco, para a
   faixa de login comecar na mesma altura do mockup. */
.lw-hero__resumo {
  max-width: 512px;  /* (683) */
  text-align: justify;
  margin-bottom: 47px;  /* (44) */
}


/* --- Os dois cartoes com icone ------------------------------------------
   Mockup: y 534..620, o primeiro em x 56..419 e o segundo em 501..905.
   Ficam lado a lado com a calha entre eles. */

.lw-cartoes {
  display: flex;
  gap: 61px;  /* (82) */
  list-style: none;
  margin: 0 0 34px;  /* (35) */
  padding: 0;
}

.lw-cartao {
  display: flex;
  align-items: center;
  gap: 17px;  /* (23) */
}

.lw-cartao__icone {
  flex-shrink: 0;
  width: auto;
  height: 62px;  /* (82) */
}

.lw-cartao__titulo {
  font-family: var(--fonte-titulo);
  font-weight: 700;
  font-size: var(--fs-corpo);
  line-height: 1.3;
  color: var(--navy);
  margin: 0;
}

.lw-cartao__texto {
  font-size: var(--fs-corpo);
  line-height: 1.3;
  color: var(--texto);
  margin: 0;
}

.lw-hero__cta {
  min-width: 274px;  /* (366) */
  min-height: 49px;  /* (65)  */
  font-size: var(--fs-h4);
}

/* A bibliotecaria vem recortada e senta sobre o branco. Fica em absoluto
   porque avanca por baixo da coluna de texto - a mesa entra em x=860 do
   mockup e o texto vai ate 953.

   Ancorada ao CONTAINER e nao a borda da tela (armadilha 9): no mockup ela e
   cortada pela lateral do quadro, entao aqui vaza 38px alem do container e o
   overflow-x: clip da secao corta o resto.

   O max() e necessario: acima de 1415px (container + as duas calhas) a borda
   do container e 50% - metade do container; abaixo disso o container passa a
   ocupar a largura toda e a borda vira a propria calha. Sem ele, entre 1200 e
   1415 a foto vazava 40px a mais do que devia. */
.lw-hero__foto {
  position: absolute;
  z-index: 0;
  top: 16px;  /* (21) */
  right: calc(max(50% - (var(--container) / 2), var(--gutter)) - 38px);
  width: 791px;  /* (1055) */
  height: auto;
  pointer-events: none;
}


/* =========================================================================
   2. Faixa dos selos
   Mockup: y 780..872. Sao os TRES do site.
   ========================================================================= */

.lw-selos { padding-block: 6px 40px; }

.lw-selos__lista {
  flex-wrap: wrap;
  gap: 44px;  /* (59) */
}


/* =========================================================================
   3. Faixa de login
   Mockup: y 971..1675 (704 -> 528). Fundo #2E52BA com o padrao de icones.

   A imagem manda na altura da faixa: assim tudo que e posicionado em
   porcentagem sobre ela acompanha em qualquer largura - e e isso que faz o
   cartao HTML cair exatamente sobre o cartao impresso no arquivo.
   ========================================================================= */

.lw-login {
  position: relative;
  background: var(--azul-libweb);
}

.lw-login__fundo {
  display: block;
  width: 100%;
  height: auto;
}

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

.lw-login__titulo {
  /* Mesma conta do banner: a 36px a linha "NO ACADESC SISTEMAS" do mockup
     fecha em 424 contra os 425 do desenho. */
  text-transform: uppercase;
  color: var(--branco);
  font-size: 36px;  /* (53) */
  line-height: 1.3;
  margin-bottom: .7em;
}

.lw-login__botao {
  min-height: 49px;  /* (65) */
  font-size: var(--fs-h4);
}


/* --- O cartao, remontado em HTML ----------------------------------------

   Ele cobre o cartao impresso na imagem. As medidas sao porcentagens do
   ARQUIVO (1915x702), onde o cartao impresso ocupa x 1429..1841 e
   y 84..641 - ou seja, centro em 85,38% x 51,64%. O cartao HTML e um pouco
   maior (22% x 80,3%) e fica centrado no mesmo ponto, para nenhuma borda
   impressa aparecer por fora.

   Por dentro, tudo em `cqw` (porcentagem da largura do proprio cartao), com
   as proporcoes tiradas do mockup: cartao 413 de largura, logo 279, campos
   277x64, botao 192x45. Assim o cartao inteiro escala junto com a imagem.

   ATENCAO: `cqw` de um elemento se resolve pelo container mais proximo ACIMA
   dele - nunca por ele mesmo. Por isso o container fica no .lw-cartao-login e
   tudo que tem medida em cqw (inclusive a borda) mora na caixa de dentro; com
   a borda no proprio container ela caia no viewport e saia com 17px. */

.lw-cartao-login {
  container-type: inline-size;

  position: absolute;
  left: 74.38%;
  top: 11.49%;
  width: 22%;
  height: 80.3%;
}

.lw-cartao-login__caixa {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  height: 100%;

  background: #273C62;
  border: 1.7cqw solid var(--amarelo);  /* (7 de 413) */
}

/* Sem isto o flex encolhe tudo para caber e o cartao sai fora de proporcao. */
.lw-cartao-login__caixa > * { flex-shrink: 0; }

.lw-cartao-login__logo {
  width: auto;
  height: 41.2cqw;  /* (170 de 413) */
  margin-top: 8.2cqw;
  margin-bottom: 4.6cqw;
}

.lw-cartao-login__campo {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 67.1cqw;   /* (277 de 413) */
  height: 15.5cqw;  /* (64  de 413) */
  margin-bottom: 1.5cqw;

  background: var(--branco);
  border: 1cqw solid var(--amarelo);

  font-family: var(--fonte-titulo);
  font-style: italic;
  text-transform: uppercase;
  font-size: 6.1cqw;  /* (25 de 413) */
  line-height: 1;
  color: var(--navy);
  white-space: nowrap;
}

.lw-cartao-login__continuar {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 46.5cqw;   /* (192 de 413) */
  height: 10.9cqw;  /* (45  de 413) */
  margin-top: 2.4cqw;

  background: #3253B6;
  color: var(--branco);
  text-decoration: none;
  font-size: 6.1cqw;
  line-height: 1;
  white-space: nowrap;
  transition: background .2s;
}

.lw-cartao-login__continuar:hover,
.lw-cartao-login__continuar:focus-visible {
  background: var(--amarelo);
  color: var(--azul);
}

.lw-cartao-login__privacidade {
  margin-top: 5.5cqw;
  font-style: italic;
  font-size: 3.4cqw;  /* (14 de 413) */
  line-height: 1;
  color: var(--branco);
  white-space: nowrap;
}


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

/* --- A foto e o texto disputam a mesma largura, e quem manda e a parte OPACA
       da foto, nao a caixa dela: a bibliotecaria tem o canto esquerdo vazio na
       altura do titulo (o desenho so comeca a 19,5% da largura) e quase todo
       preenchido na altura dos cartoes (a mesa chega a 10,2%).

       Com 791px de foto isso fecha: os cartoes vao ate 682 e a mesa so comeca
       em 708. Abaixo de 1400 a conta nao fecha mais e a foto encolhe. ----- */
@media (max-width: 1399.98px) {

  .lw-hero__foto { width: 620px; }

  .lw-hero__resumo { max-width: 470px; }

  .lw-cartoes { gap: 34px; }
}


/* --- Abaixo de 1280px nem a foto menor resolve: os cartoes chegariam na mesa.
       A foto desce para baixo do texto e o banner vira uma coluna so. ---- */
@media (max-width: 1279.98px) {

  .lw-hero__resumo { max-width: 100%; }

  .lw-hero__foto {
    position: static;
    display: block;
    width: min(700px, 100%);
    margin: 30px auto 0;
  }

  .lw-hero__interno { padding-bottom: 0; }

  .lw-hero { padding-bottom: 45px; }

  .lw-cartoes { gap: 61px; }
}


@media (max-width: 1199.98px) {

  .lw-hero__sobretitulo,
  .lw-hero__titulo { font-size: 30px; }

  .lw-login__titulo { font-size: var(--fs-h2); }
}


/* --- Tablet: a faixa de login e larga demais para caber inteira ---------- */
@media (max-width: 991.98px) {

  /* A imagem passa a preencher a faixa e o excesso e cortado nas laterais.
     Com isso o cartao impresso sai de cena - e o cartao HTML pode descer para
     o fluxo, embaixo do texto, em tamanho fixo. */
  .lw-login__fundo {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: left center;
  }

  .lw-login__interno {
    position: relative;
    inset: auto;
    padding-block: 40px 0;
  }

  /* O respiro de baixo e padding da SECAO, nao margem do cartao: como ele e o
     ultimo filho e a secao nao tem borda nem padding, a margem escaparia
     (colapso) e o cartao encostaria no fim da faixa. */
  .lw-login { padding-bottom: 44px; }

  .lw-cartao-login {
    position: relative;
    left: auto;
    top: auto;
    width: min(300px, 100%);
    height: auto;
    margin: 30px auto 0;
  }

  .lw-cartao-login__caixa { height: auto; padding-bottom: 8cqw; }

  .lw-cartoes { gap: 40px; }
}


@media (max-width: 767.98px) {

  .lw-hero__interno { padding-block: 30px 30px; }

  .lw-hero__sobretitulo,
  .lw-hero__titulo { font-size: 26px; }

  .lw-hero__resumo { text-align: left; }

  .lw-hero__cta { width: 100%; }

  .lw-cartoes {
    flex-direction: column;
    gap: 22px;
  }

  .lw-selos__lista { gap: 22px; }

  .lw-login__botao { width: 100%; }
}