/* Tela A1 — boas-vindas. Só o que não se repete em outra tela.
 * Estrutura, botão, folha e cortes moram em layout.css e componentes.css.
 * Desktop primeiro, como todo o resto. */

.entrada { background: var(--hero) }

.entrada__topo {
  display: flex;
  flex-direction: column;
  gap: 32px;
  color: #FFFFFF;
}

/* Colagem: três cartões soltos ilustrando o que o app faz. É decorativa e some
   dos leitores de tela. A largura fica presa porque ela é um agrupamento — se
   acompanhar a coluna, os três se afastam e viram três avulsos. */
.colagem {
  position: relative;
  height: 232px;
  max-width: 400px;
}

.colagem > * {
  position: absolute;
  background: #FFFFFF;
  color: #17201C;
  box-shadow: var(--sombra-solta);
}

.colagem__par {
  left: 0;
  top: 0;
  width: 230px;
  max-width: 72%;
  border-radius: 18px;
  padding: 12px 14px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.avatar-ret { position: relative; flex-shrink: 0 }

.avatar-ret__disco {
  width: 40px;
  height: 40px;
  border-radius: 20px;
  background: var(--av);
  color: #FFFFFF;
  font-size: 15px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
}

.avatar-ret__ponto {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 10px;
  height: 10px;
  border-radius: 5px;
  background: #2E9E6B;
  border: 2px solid #FFFFFF;
}

.colagem__nome { display: flex; flex-direction: column; gap: 4px; min-width: 0 }
.colagem__nome b { font-size: 14px; font-weight: 800 }

.etiqueta {
  font-size: 11px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 6px;
  background: #EAF3EF;
  color: #1F6F5C;
  align-self: flex-start;
}

.colagem__correcao {
  right: 0;
  top: 74px;
  width: 220px;
  max-width: 68%;
  border: 2px solid var(--ac);
  border-radius: 18px 18px 4px 18px;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.colagem__correcao > span:first-child { font-size: 11px; font-weight: 800; color: #8A3F0E }
.colagem__errado { font-size: 13px; color: #9E3027; text-decoration: line-through }
.colagem__certo { font-size: 13px; color: #1C6B42; font-weight: 800 }

.colagem__taxa {
  left: 20px;
  bottom: 0;
  border-radius: 16px;
  padding: 10px 14px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.colagem__taxa strong { font-size: 26px; font-weight: 800; color: #1F6F5C }
.colagem__taxa span { font-size: 12px; font-weight: 600; line-height: 1.3; color: #4A5651 }

.entrada__chamada { display: flex; flex-direction: column; gap: 10px }

.entrada__chamada h1 {
  margin: 0;
  font-size: 52px;
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.entrada__chamada p { margin: 0; font-size: 16px; line-height: 1.5; color: var(--hero-t2) }
.entrada__chamada p b { font-weight: 800; color: #FFFFFF }

/* ----------------------------------------------------------- corte 1199 --- */
@media (max-width: 1199px) {
  .entrada__chamada h1 { font-size: 44px }
}

/* ------------------------------------------------------------ corte 899 --- */
@media (max-width: 899px) {
  .entrada__topo {
    flex: 1;
    gap: 28px;
    padding-top: calc(56px + env(safe-area-inset-top, 0px));
    padding-bottom: 32px;
  }

  .colagem { height: 210px; max-width: none }
  .entrada__chamada h1 { font-size: 36px }
  .entrada__chamada p { font-size: 15px }
}

/* ------------------------------------------------------------ corte 559 --- */
@media (max-width: 559px) {
  .entrada__topo { padding-top: calc(36px + env(safe-area-inset-top, 0px)) }
  .entrada__chamada h1 { font-size: 32px; line-height: 1.1 }
}