/* ---------------------------------------------------------------------------
   Capa de acesso — a mesma porta para os dois modelos.

   Cores literais, não variáveis: os dois modelos têm paletas diferentes
   (a vitrine é mais escura que o Clássico), e a porta de entrada precisa ser
   a MESMA nos dois. Herdar a paleta de cada página daria duas capas parecidas
   em vez de uma capa só.

   Carregue este arquivo DEPOIS do <style> da página: as regras de campo e
   botão têm a mesma especificidade das de cada modelo, e quem chega por
   último vence.
   --------------------------------------------------------------------------- */

.capa-acesso {
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  /* explícitos: sem eles, um alinhamento herdado da página encolhe cabeçalho
     e rodapé para a largura do conteúdo em vez de ocuparem a tela */
  align-items: stretch;
  justify-content: flex-start;
  overflow: hidden;
  padding: 0;
  background: #08071A;
  color: #F3F4FB;
}

/* o fundo é o catálogo: capas de verdade, inclinadas para o alinhamento da
   grade não denunciar a repetição */
.capa-acesso .mosaico {
  position: absolute; inset: -14%;
  display: grid; gap: 7px;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  transform: rotate(-3.5deg) scale(1.06);
  pointer-events: none;
}
.capa-acesso .mosaico img {
  width: 100%; aspect-ratio: 16/9; object-fit: cover; border-radius: 4px; opacity: .72;
}
.capa-acesso .veu {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(105% 78% at 50% 44%, rgba(8,7,26,.86), rgba(8,7,26,.62) 55%, rgba(8,7,26,.90) 100%),
    linear-gradient(180deg, rgba(8,7,26,.88), rgba(8,7,26,.30) 38%, rgba(8,7,26,.95));
}

.capa-acesso .cabeca-login {
  position: relative; z-index: 2;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 22px clamp(16px, 5vw, 54px);
}
.capa-acesso .cabeca-login .marca {
  display: flex; align-items: center; gap: 10px; text-decoration: none;
}
.capa-acesso .cabeca-login .marca img { height: 28px; margin: 0; }
.capa-acesso .cabeca-login .actflix {
  font: 800 21px/1 Poppins, sans-serif; letter-spacing: .04em; text-transform: uppercase;
  color: #FDB913; transform: scaleY(1.14); transform-origin: center; display: inline-block;
  text-shadow: 0 1px 0 rgba(0,0,0,.4), 0 4px 22px rgba(253,185,19,.28); white-space: nowrap;
}
/* O play no meio separa ACT de FLIX: em caixa alta e apertado o L encosta no F
   e a marca era lida como ACTFIX, que é outra empresa do Grupo. Em `em` para
   acompanhar o tamanho da fonte onde a marca for usada. */
.actflix .act { color: #fff; }
.actflix .play {
  display: inline-block; width: 0; height: 0; vertical-align: middle;
  border-left: .34em solid #FDB913; border-top: .21em solid transparent;
  border-bottom: .21em solid transparent; margin: 0 .15em .06em;
}

.capa-acesso .cabeca-login .outro-modelo {
  color: #9DA0C0; font-size: 12.5px; text-decoration: none;
  border: 1px solid rgba(255,255,255,.10); border-radius: 99px; padding: 7px 15px;
}
.capa-acesso .cabeca-login .outro-modelo:hover { color: #fff; border-color: rgba(255,255,255,.3); }

.capa-acesso .miolo-login {
  position: relative; z-index: 2; flex: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 24px clamp(16px, 5vw, 54px) 50px;
}
.capa-acesso h1 {
  font: 800 clamp(26px, 4vw, 46px)/1.12 Poppins, sans-serif;
  /* medida larga o bastante para o título caber em três linhas: com 17ch ele
     ia para quatro e empurrava o rodapé para fora em tela baixa */
  max-width: 22ch; text-align: center; color: #fff;
  text-shadow: 0 2px 24px rgba(0,0,0,.6);
}
.capa-acesso .chamada {
  font-size: clamp(15px, 1.5vw, 19px); font-weight: 300; color: #dfe1f5;
  margin-top: 18px; max-width: 46ch; line-height: 1.55; text-align: center;
}
.capa-acesso .convite {
  font-size: 14.5px; font-weight: 300; color: #9DA0C0; margin-top: 30px; text-align: center;
}

.capa-acesso .linha-entrada {
  display: flex; gap: 10px; flex-wrap: wrap; justify-content: center;
  margin-top: 14px; width: min(580px, 100%);
}
.capa-acesso input {
  background: #0d0b26; border: 1.5px solid rgba(255,255,255,.10); border-radius: 9px;
  color: #F3F4FB; font-family: inherit; padding: 13px 15px; font-size: 14.5px; width: 100%;
}
.capa-acesso input:focus { outline: none; border-color: #FDB913; }
.capa-acesso input::placeholder { color: #6f7396; }
.capa-acesso .linha-entrada input { flex: 1 1 260px; margin: 0; padding: 15px 16px; font-size: 15px; }
.capa-acesso .linha-entrada button {
  width: auto; margin: 0; padding: 0 30px; height: 52px; font-size: 15.5px; white-space: nowrap;
}
.capa-acesso button {
  background: #FDB913; color: #14123f; border: 0; border-radius: 10px;
  font: 700 15px Poppins, sans-serif; padding: 14px; cursor: pointer; width: 100%;
}
.capa-acesso button:hover { filter: brightness(1.06); }
.capa-acesso button:disabled { opacity: .6; cursor: default; }

.capa-acesso .cartao-codigo {
  width: min(430px, 100%); margin-top: 22px; text-align: left;
  background: rgba(10,9,30,.88); border: 1px solid rgba(255,255,255,.10);
  border-radius: 16px; padding: 24px; backdrop-filter: blur(8px);
}
.capa-acesso .cartao-codigo h2 { font: 800 16px Poppins, sans-serif; margin-bottom: 4px; color: #fff; }
.capa-acesso .cartao-codigo .dito {
  font-size: 12.5px; font-weight: 300; color: #9DA0C0; line-height: 1.55;
  margin-bottom: 16px; text-align: left;
}
.capa-acesso .cartao-codigo label {
  display: block; font: 700 10px Poppins, sans-serif; letter-spacing: .1em;
  text-transform: uppercase; color: #9DA0C0; margin: 14px 0 6px;
}
.capa-acesso .cartao-codigo button#btn-entrar,
.capa-acesso .cartao-codigo .principal { margin-top: 18px; }
.capa-acesso .voltar-email {
  display: block; width: 100%; margin-top: 12px; background: none; border: 0;
  color: #9DA0C0; font-size: 12.5px; text-decoration: underline; padding: 0;
}
.capa-acesso .voltar-email:hover { color: #fff; filter: none; }
/* Reenviar e trocar de e-mail dividem a mesma linha, com o mesmo peso: as duas
   são saídas de emergência, nenhuma delas é a ação principal do cartão. Em tela
   estreita quebram uma embaixo da outra em vez de espremer o texto. */
.capa-acesso .acoes-codigo {
  display: flex; flex-wrap: wrap; gap: 8px 18px; justify-content: center; margin-top: 12px;
}
.capa-acesso .acoes-codigo .voltar-email { width: auto; margin-top: 0; }
.capa-acesso .acoes-codigo .voltar-email:disabled { opacity: .55; text-decoration: none; cursor: default; }

.capa-acesso .msg { margin-top: 14px; font-size: 13.5px; text-align: center; }

.capa-acesso .pe-login {
  position: relative; z-index: 2; text-align: center; color: #8a8ea8;
  font-size: 11.5px; font-weight: 300; padding: 0 clamp(16px, 5vw, 54px) 28px; line-height: 1.6;
}

/* no passo do código a tela é formulário, não vitrine: o herói encolhe para o
   cartão caber inteiro mesmo em notebook de tela baixa */
.capa-acesso.no-codigo h1 { font-size: clamp(21px, 2.6vw, 30px); max-width: 24ch; }
.capa-acesso.no-codigo .chamada { display: none; }
.capa-acesso.no-codigo .mosaico img { opacity: .5; }

/* tela baixa (notebook com barra de tarefas, ~600 px úteis): o ritmo vertical
   aperta em vez de empurrar o rodapé para fora da vista */
@media (max-height: 720px) {
  .capa-acesso .cabeca-login { padding-top: 14px; padding-bottom: 8px; }
  .capa-acesso .miolo-login { padding-top: 8px; padding-bottom: 22px; }
  .capa-acesso h1 { font-size: clamp(23px, 3.1vw, 34px); }
  .capa-acesso .chamada { margin-top: 12px; font-size: 15px; }
  .capa-acesso .convite { margin-top: 18px; }
  .capa-acesso .pe-login { padding-bottom: 16px; }
  .capa-acesso .cartao-codigo { margin-top: 14px; padding: 18px; }
}

@media (max-width: 700px) {
  .capa-acesso .mosaico { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
  .capa-acesso .linha-entrada button { width: 100%; }
}