/* --------------------------------------------------------------------------
   Modal de saída — cupom de primeira compra
   --------------------------------------------------------------------------
   Três telas na mesma caixa: oferta, formulário e cupom. Só uma visível por
   vez, trocadas pelo atributo hidden — sem transição entre elas, porque a
   pessoa clicou e quer ver o resultado, não uma animação.
   -------------------------------------------------------------------------- */

.modal-saida {
  position: fixed;
  inset: 0;
  z-index: 200; /* acima do header fixo */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-6);
  opacity: 0;
  /* Enquanto não está aberto ele não intercepta clique. Cobre a janela
     inteira, então sem isto a página fica intocável durante os 200ms em
     que ele some — e em qualquer estado que escape do [hidden]. */
  pointer-events: none;
  transition: opacity var(--duration-normal) var(--ease-default);
}

/* O atributo hidden vale display:none na folha do navegador, mas QUALQUER
   display declarado pelo autor ganha dele. Sem esta regra o display:flex
   acima mantém a camada viva o tempo todo: invisível, cobrindo a tela e
   comendo todos os cliques da página. */
.modal-saida[hidden] {
  display: none;
}

.modal-saida.is-aberto {
  opacity: 1;
  pointer-events: auto;
}

.modal-saida__fundo {
  position: absolute;
  inset: 0;
  background-color: rgba(10, 10, 10, 0.6);
}

.modal-saida__caixa {
  position: relative;
  width: 100%;
  max-width: 26rem; /* 416px */
  padding: var(--space-12) var(--space-8) var(--space-10);
  text-align: center;
  background-color: var(--color-bg-elevated);
  border-radius: var(--radius-lg);
  box-shadow: 0 1.5rem 3rem rgba(5, 5, 5, 0.24);
  /* Entra subindo: o deslocamento diz "isto apareceu agora" sem custar
     um quadro de layout. */
  transform: translateY(12px);
  transition: transform var(--duration-normal) var(--ease-default);
}

.modal-saida.is-aberto .modal-saida__caixa {
  transform: translateY(0);
}

.modal-saida__caixa:focus {
  outline: none;
}

.modal-saida__fechar {
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px; /* alvo de toque confortável */
  height: 36px;
  padding: 0;
  color: var(--color-fg-subtle);
  background: none;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  transition: color var(--duration-fast) var(--ease-default);
}

.modal-saida__fechar:hover {
  color: var(--color-fg);
}

/* A escala estava comprimida: 14 / 24 / 16 deixava o título só 1,5× maior
   que o corpo, e nada mandava na caixa. O hero do livro resolve o mesmo
   problema com 2,2× de diferença — é essa proporção que se repete aqui. */
.modal-saida__titulo {
  margin: 0 0 var(--space-3);
  font-family: var(--font-heading);
  font-size: var(--text-h3); /* 29.03px */
  font-weight: var(--font-semibold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--color-fg);
}

.modal-saida__texto {
  margin: 0 0 var(--space-6);
  font-family: var(--font-ui);
  font-size: var(--text-p); /* 14px */
  line-height: var(--leading-normal);
  color: var(--color-fg-subtle);
  /* Texto centralizado precisa de medida curta: linha longa obriga o olho
     a caçar onde a próxima começa, porque não há margem fixa à esquerda. */
  max-width: 30ch;
  margin-inline: auto;
}

.modal-saida__cta {
  display: block;
  width: 100%;
  padding: var(--space-4) var(--space-6);
  font-family: var(--font-ui);
  font-size: var(--text-body);
  font-weight: var(--font-semibold);
  color: var(--color-bg-elevated);
  text-align: center;
  text-decoration: none;
  background-color: var(--color-fg);
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  transition: opacity var(--duration-fast) var(--ease-default);
}

.modal-saida__cta:hover {
  opacity: 0.88;
}

.modal-saida__cta[aria-busy='true'] {
  opacity: 0.6;
  cursor: progress;
}

.modal-saida__cta--link {
  margin-top: var(--space-4);
}

/* --- Formulário --- */

.modal-saida__form {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  text-align: left;
}

.modal-saida__campo {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.modal-saida__rotulo {
  font-family: var(--font-ui);
  font-size: var(--text-p);
  color: var(--color-fg-subtle);
}

.modal-saida__campo input {
  width: 100%;
  padding: var(--space-3) var(--space-4);
  font-family: var(--font-ui);
  font-size: var(--text-body);
  color: var(--color-fg);
  background-color: var(--color-bg-elevated);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
}

.modal-saida__campo input:focus {
  outline: 2px solid var(--color-secondary);
  outline-offset: 1px;
}

.modal-saida__erro {
  margin: 0;
  font-family: var(--font-ui);
  font-size: var(--text-p);
  color: #b3261e; /* vermelho de erro, 4.5:1 sobre branco */
}

.modal-saida__aviso {
  margin: 0;
  font-family: var(--font-ui);
  font-size: var(--text-p);
  line-height: var(--leading-normal);
  color: var(--color-fg-subtle);
}

/* --- O cupom --- */

.modal-saida__cupom {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
  width: 100%;
  padding: var(--space-4);
  margin-bottom: var(--space-2);
  background-color: var(--color-panel);
  border: 1px dashed var(--color-border-strong);
  border-radius: var(--radius-md);
  cursor: pointer;
}

.modal-saida__cupom-codigo {
  font-family: var(--font-heading);
  font-size: var(--text-h5);
  font-weight: var(--font-semibold);
  letter-spacing: var(--tracking-wide);
  color: var(--color-fg);
}

.modal-saida__cupom-dica {
  font-family: var(--font-ui);
  font-size: var(--text-p);
  color: var(--color-fg-subtle);
}

/* Rolagem travada enquanto o modal está aberto: sem isso o fundo desliza
   atrás da caixa no toque. */
body.modal-saida-aberto {
  overflow: hidden;
}

@media (max-width: 480px) {
  .modal-saida {
    /* No celular a caixa encosta na base: o polegar alcança o botão sem
       esticar até o meio da tela. */
    align-items: flex-end;
    padding: 0;
  }

  .modal-saida__caixa {
    max-width: none;
    padding: var(--space-8) var(--space-6) var(--space-6);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    transform: translateY(100%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .modal-saida,
  .modal-saida__caixa {
    transition: none;
  }

  .modal-saida__caixa {
    transform: none;
  }
}

/* --------------------------------------------------------------------------
   Rostos dos autores
   --------------------------------------------------------------------------
   A prova da frase que vem logo abaixo. Reaproveita o componente da home;
   aqui só precisa centralizar e encolher — a caixa é estreita e eles não
   podem competir com o título.
   -------------------------------------------------------------------------- */

.modal-saida__autores {
  justify-content: center;
  /* Mais folga que o resto: este bloco abre o modal, e colado no título
     os dois viram uma coisa só. */
  margin-bottom: var(--space-8);
}

/* A frase é a mesma da home, mas ali ela divide uma faixa larga. Aqui a
   caixa é estreita: menor e com medida curta, pra caber ao lado dos
   rostos sem espremer nenhum dos dois. */
.modal-saida__autores .home-hero__proof-text {
  flex: 0 1 auto;
  max-width: 11rem;
  font-size: var(--text-p);
  text-align: left;
}

.modal-saida__autores .home-hero__avatars img,
.modal-saida__autores .home-hero__avatar-more {
  width: 2.25rem; /* 36px, contra os 45 da home */
  height: 2.25rem;
}

.modal-saida__autores .home-hero__avatar-more {
  font-size: var(--text-small);
}

/* O tooltip do componente aponta pra cima. Aqui os rostos são o primeiro
   elemento da caixa, então pra cima ele sairia pela borda do modal —
   inverte pra baixo, onde tem espaço. */
.modal-saida__autores .home-hero__avatars li::after {
  bottom: auto;
  top: calc(100% + var(--space-2));
  transform: translate(-50%, -0.25rem);
}

.modal-saida__autores .home-hero__avatars li:hover::after,
.modal-saida__autores .home-hero__avatars li:focus-within::after {
  transform: translate(-50%, 0);
}