/* ─────────────────────────────────────────────────────────────────────────
   Área de Autor · v2 — a entrada

   A porta tem de ser da mesma casa que está lá dentro, e tem de ser de hoje.
   A primeira tentativa foi papel sobre papel: literária, mas parada — um
   título grande, um parágrafo grande e um cartão ao lado.

   Agora manda o vermelho, que é o que esta casa tem de mais seu: uma folha
   inteira ao lado (no telemóvel, por cima), com a mesma textura de pontos e
   o mesmo gradiente da fita de números e do topo das páginas na app. O
   cartão de entrar pousa no papel, a cavalo na folha. É o gesto que a área
   já faz lá dentro — aqui é só o primeiro.
   ───────────────────────────────────────────────────────────────────────── */

/* Não há cabeçalho nem barra de separadores: o espaço que o body.aa lhes
   reserva ficaria vazio no topo. */
/* A entrada não tem barra lateral: a folha vermelha aqui é a própria página.
   Tira-se o espaço que o body.aa reserva ao cabeçalho e à barra. */
body.aa.aa-entrada{padding:0;min-height:100svh}

.aa-entrada-palco{
  min-height:100svh;
  display:grid;
  grid-template-columns:minmax(0,.86fr) minmax(0,1fr);
  align-items:stretch;
}

/* ─────────────────────────── a folha vermelha ───────────────────────────
   O mesmo vermelho, o mesmo gradiente e a mesma trama de pontos das outras
   superfícies escuras da área (ver .aa-numeros em area-autor-v2.css). Não é
   um vermelho novo: é aquele. */

.aa-entrada-folha{
  position:relative;isolation:isolate;overflow:hidden;
  display:flex;flex-direction:column;justify-content:center;
  padding:clamp(40px,5vw,72px) clamp(28px,4.4vw,72px);
  color:#fff;
  border-radius:0 clamp(28px,3.4vw,46px) clamp(28px,3.4vw,46px) 0;
  background:
    radial-gradient(circle at 1px 1px,rgba(255,255,255,.13) 1px,transparent 0) 0 0/22px 22px,
    linear-gradient(152deg,var(--aa-red-deep) 0%,var(--aa-red) 58%,#C92026 100%);
  box-shadow:0 30px 60px -38px rgba(124,15,20,.9);
}
/* um halo quente em baixo, para a folha não ser uma chapa lisa */
.aa-entrada-folha::after{
  content:"";position:absolute;z-index:-1;inset:auto -20% -30% auto;
  width:min(70%,520px);aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,rgba(255,255,255,.16),transparent 66%);
}

.aa-entrada-logo{
  display:block;width:clamp(116px,10vw,152px);height:auto;
  margin-bottom:clamp(30px,4vw,54px);
}

.aa-entrada-titulo{
  font-family:var(--aa-display);font-size:clamp(2.2rem,4vw,3.4rem);
  font-weight:600;line-height:1.03;letter-spacing:-.025em;
  margin:0 0 clamp(14px,1.6vw,20px);text-wrap:balance;color:#fff;
}
/* a saudação vale menos do que o nome do sítio, e mostra-o no tamanho */
.aa-entrada-titulo span{display:block;font-size:.52em;font-weight:500;opacity:.78;margin-bottom:.34em}
.aa-entrada-titulo em{display:block;font-style:italic}

.aa-entrada-lead{
  color:rgba(255,255,255,.8);margin:0;max-width:36ch;
  font-size:clamp(.98rem,.9vw,1.06rem);line-height:1.6;
}
.aa-entrada-nota{margin-top:clamp(18px,2.2vw,28px);color:#fff;opacity:.92}

/* ─────────────────────────── o lado do papel ─────────────────────────── */

.aa-entrada-papel{
  position:relative;
  display:flex;flex-direction:column;justify-content:center;
  padding:clamp(40px,5vw,72px) clamp(24px,4.4vw,80px);
  background:var(--aa-paper);
}

.aa-entrada-cartao{width:100%;max-width:430px}

.aa-entrada-cartao-titulo{
  font-family:var(--aa-display);font-size:clamp(1.6rem,2.4vw,2rem);font-weight:600;
  letter-spacing:-.025em;margin:0 0 6px;
}
.aa-entrada-cartao-sub{color:var(--aa-muted);font-size:.94rem;margin:0 0 26px}

/* ── os campos ──
   Bootstrap desenha-os; aqui muda-se-lhes a roupa. O `form-floating` fica,
   que é dele que vem o rótulo a subir quando se escreve. */
.aa-entrada-campos{display:grid;gap:10px}
.aa-entrada-cartao .form-floating > .form-control{
  height:66px;padding:24px 20px 8px;
  border:1px solid var(--aa-line-strong);border-radius:var(--aa-radius-sm);
  background:#fff;color:var(--aa-ink);
  font-family:var(--aa-sans);font-size:1.02rem;
  box-shadow:none;transition:border-color .25s ease,box-shadow .25s ease;
}
.aa-entrada-cartao .form-floating > .form-control:focus{
  border-color:var(--aa-red);outline:none;
  box-shadow:0 0 0 3px var(--aa-red-soft);
}
.aa-entrada-cartao .form-floating > label{
  padding:18px 20px;color:var(--aa-muted);font-size:.95rem;border:0;
}
.aa-entrada-cartao .form-floating > .form-control:focus ~ label,
.aa-entrada-cartao .form-floating > .form-control:not(:placeholder-shown) ~ label{
  color:var(--aa-muted);opacity:1;transform:scale(.78) translateY(-.62rem) translateX(.12rem);
}

.aa-entrada-cartao .form-control.is-invalid{border-color:var(--aa-red);background-image:none;box-shadow:none}
.aa-entrada-cartao .form-control.is-valid{border-color:var(--aa-verde);background-image:none;box-shadow:none}
.aa-entrada-cartao .invalid-feedback{color:var(--aa-red);font-size:.85rem;margin-top:6px}

.aa-entrada-botao{width:100%;margin-top:18px;padding-block:1.05em;font-size:.98rem}
.aa-entrada-botao .bi{font-size:1.3em;line-height:1}

.aa-entrada-aviso{
  margin:0 0 18px;padding:12px 15px;border-radius:var(--aa-radius-xs);
  background:var(--aa-red-soft);color:var(--aa-red-deep);
  font-size:.88rem;line-height:1.5;
}
.aa-entrada-conta{min-height:1.4em;margin:10px 0 0;color:var(--aa-red);font-size:.85rem}
.aa-entrada-espera{margin-top:16px;text-align:center;color:var(--aa-muted)}

.text-cordel{color:var(--aa-red)}

/* ─────────────────────────── as chancelas ───────────────────────────
   Quatro selos, uma casa — e um autor pode ter livros em mais do que um.
   Ficam em baixo, do lado do papel, em cinzento; ganham cor ao passar por
   cima. As alturas são as do site (css/home.css): as marcas têm proporções
   muito diferentes e, com a mesma altura, umas esmagavam as outras. */

.aa-entrada-marcas{margin-top:clamp(40px,5vw,64px);max-width:430px}
.aa-entrada-marcas-rotulo{
  margin:0 0 18px;display:inline-flex;align-items:center;gap:.6em;
  font-family:var(--aa-sans);font-size:.68rem;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--aa-muted);
}
.aa-entrada-marcas-rotulo::before{content:"";width:20px;height:1.5px;background:currentColor;opacity:.5}

.aa-entrada-marcas-lista{
  display:flex;align-items:flex-end;flex-wrap:wrap;
  gap:clamp(18px,2.4vw,32px);
}
.aa-entrada-marca{display:inline-flex;align-items:flex-end;gap:8px}
.aa-entrada-marca img{
  display:block;width:auto;height:30px;
  filter:grayscale(1);opacity:.46;
  transition:filter .35s var(--aa-ease),opacity .35s var(--aa-ease);
}
.aa-entrada-marca[data-marca="dprata"] img{height:52px}
.aa-entrada-marca[data-marca="signature"] img{height:42px}
.aa-entrada-marca:hover img{filter:none;opacity:1}

.aa-entrada-versao{margin-top:22px;color:var(--aa-muted);font-size:.74rem}

/* ─────────────────────────── a chegada ───────────────────────────
   Um levantar curto, e uma vez só. Depois disto a página não se mexe mais. */
@media (prefers-reduced-motion:no-preference){
  .aa-entrada-anima{animation:aaEntradaSobe .7s var(--aa-ease) both}
  .aa-entrada-anima--2{animation-delay:.07s}
  .aa-entrada-anima--3{animation-delay:.14s}
  @keyframes aaEntradaSobe{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
}

/* ─────────────────────────── telemóvel e tablet ───────────────────────────
   A folha vermelha passa a faixa no topo, com os cantos de baixo redondos —
   o mesmo gesto do topo das páginas na app. O cartão sobe e fica a cavalo
   nela: é isso que dá profundidade, que uma pilha de blocos não dá. */

@media (max-width:900px){
  /* Uma coluna, e o papel a esticar até ao fim do ecrã: as marcas caem para
     o fundo em vez de deixarem um vazio grande por baixo delas. */
  .aa-entrada-palco{grid-template-columns:minmax(0,1fr);grid-template-rows:auto 1fr}

  .aa-entrada-folha{
    border-radius:0 0 clamp(26px,6vw,34px) clamp(26px,6vw,34px);
    padding:clamp(24px,6vw,38px) var(--aa-gutter) clamp(46px,11vw,64px);
    justify-content:flex-start;
  }
  .aa-entrada-logo{width:clamp(84px,22vw,104px);margin-bottom:clamp(16px,4.5vw,24px)}
  .aa-entrada-titulo{font-size:clamp(1.9rem,8vw,2.7rem);margin-bottom:10px}
  /* A apresentação sai: no telemóvel o ecrã é para entrar, e o título já
     diz onde a pessoa está. Fica no computador, onde há espaço para ela. */
  .aa-entrada-lead{display:none}
  .aa-entrada-nota{margin-top:14px}

  .aa-entrada-papel{
    padding:0 var(--aa-gutter) clamp(24px,6vw,40px);
    background:transparent;justify-content:flex-start;
  }
  /* a cavalo na faixa */
  .aa-entrada-cartao{
    max-width:none;margin-top:clamp(-46px,-10vw,-34px);
    background:var(--aa-card);
    border-radius:clamp(20px,4vw,26px);
    box-shadow:var(--aa-shadow-md);
    padding:clamp(20px,5vw,26px);
  }
  .aa-entrada-cartao-sub{margin-bottom:18px}
  .aa-entrada-cartao .form-floating > .form-control{height:60px}
  .aa-entrada-botao{margin-top:14px}

  .aa-entrada-marcas{max-width:none;margin-top:auto;padding-top:clamp(24px,6vw,34px)}
  .aa-entrada-marcas-rotulo{margin-bottom:12px}
  .aa-entrada-marcas-lista{gap:16px 26px;justify-content:space-between}
  .aa-entrada-marca img{height:22px}
  .aa-entrada-marca[data-marca="dprata"] img{height:34px}
  .aa-entrada-marca[data-marca="signature"] img{height:28px}
  .aa-entrada-versao{margin-top:14px}
}

/* no telemóvel estreito as quatro continuam numa fila: sem a palavra ao lado
   do monograma, cabem. */
@media (max-width:420px){
  .aa-entrada-marcas-lista{gap:14px}
  .aa-entrada-marca img{height:20px}
  .aa-entrada-marca[data-marca="dprata"] img{height:30px}
  .aa-entrada-marca[data-marca="signature"] img{height:26px}
}