/* MODAL DE PLANO — o convite premium pra quem esbarrou num recurso pago.
 *
 * Prefixo `pmz-` conferido contra todas as folhas antes de escrever (neste projeto já
 * colidi três vezes com prefixo curto demais).
 *
 * Feito em cima da referência que o dono mandou: modal largo e deitado, mascote à esquerda,
 * conversa à direita, quatro benefícios em fila separados por fio fino, e um CTA em pílula
 * que é a única coisa da tela com brilho forte. */

.pmz-fundo {
  position: fixed; inset: 0; z-index: 9000;
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  background: rgba(2, 6, 12, 0.76);
  /* O blur é o que faz o fundo virar "fundo": sem ele o modal parece mais um cartão
     empilhado no meio da página. */
  backdrop-filter: blur(7px) saturate(0.8);
  opacity: 0;
  transition: opacity 220ms ease;
}
.pmz-fundo.pmz-on { opacity: 1; }
/* Trava a rolagem atrás. Sem isto, rolar dentro do modal arrasta a página junto. */
body.pmz-travado { overflow: hidden; }

.pmz-modal {
  position: relative; width: 100%; max-width: 880px;
  max-height: calc(100vh - 40px); overflow-y: auto;
  padding: 34px 42px 26px; border-radius: 22px;
  /* Os brilhos nos cantos são o "fundo tecnológico" da referência: dois focos de luz azul
     nas quinas, sem imagem nenhuma. */
  background:
    radial-gradient(65% 80% at 12% 8%, rgba(26, 110, 210, 0.34), transparent 60%),
    radial-gradient(60% 70% at 96% 96%, rgba(20, 86, 180, 0.3), transparent 62%),
    linear-gradient(180deg, rgba(8, 22, 44, 0.98), rgba(4, 11, 24, 0.99));
  border: 1px solid rgba(79, 178, 255, 0.5);
  box-shadow: 0 0 0 1px rgba(58, 164, 255, 0.14), 0 40px 110px rgba(0, 0, 0, 0.72),
              0 0 90px rgba(16, 92, 180, 0.3);
  /* Entra subindo um pouco e crescendo — 260ms com saída suave: parece resposta, não truque. */
  transform: translateY(14px) scale(0.965);
  opacity: 0;
  transition: transform 260ms cubic-bezier(0.22, 1, 0.36, 1), opacity 240ms ease;
}
.pmz-fundo.pmz-on .pmz-modal { transform: none; opacity: 1; }

.pmz-x {
  position: absolute; top: 18px; right: 18px;
  width: 34px; height: 34px; padding: 0; border-radius: 50%; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid rgba(79, 178, 255, 0.3); background: rgba(8, 20, 38, 0.8); color: var(--txt-suave);
  transition: color 180ms ease, border-color 180ms ease, background 180ms ease;
}
.pmz-x svg { width: 14px; height: 14px; }
.pmz-x:hover { color: var(--txt); border-color: rgba(111, 192, 255, 0.6); background: rgba(16, 44, 80, 0.9); }

/* ── topo: mascote + conversa ────────────────────────────────────────────────── */
.pmz-topo { display: grid; grid-template-columns: 250px 1fr; gap: 26px; align-items: center; }
.pmz-arte { display: flex; align-items: center; justify-content: center; }
/* O robô-nuvem que já é o ícone do app. O drop-shadow azul faz ele "acender" sem precisar
   de uma segunda arte só pro modal. */
.pmz-arte img {
  width: 100%; max-width: 240px; height: auto;
  filter: drop-shadow(0 0 26px rgba(43, 149, 255, 0.5));
}

.pmz-cabeca { display: flex; align-items: center; gap: 10px; }
.pmz-olho {
  font-size: 13px; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--azul-claro);
}
.pmz-badge {
  padding: 5px 15px; border-radius: 999px;
  font-size: 11px; font-weight: 800; letter-spacing: 0.12em;
  color: #eaf4ff; border: 1px solid rgba(111, 192, 255, 0.75);
  background: linear-gradient(180deg, rgba(30, 118, 214, 0.75), rgba(12, 66, 140, 0.75));
  box-shadow: 0 0 18px rgba(43, 149, 255, 0.36);
}

.pmz-tit {
  margin: 10px 0 0; font-size: 34px; font-weight: 800;
  letter-spacing: -0.01em; line-height: 1.08; text-transform: uppercase; color: #fff;
  text-shadow: 0 0 34px rgba(43, 149, 255, 0.34);
}
.pmz-txt { margin: 14px 0 0; font-size: 14.5px; line-height: 1.55; color: #c3d6ec; }
/* A frase que o servidor mandou, quando ela acrescenta algo ao padrão. */
.pmz-motivo {
  margin: 10px 0 0; padding-left: 11px; font-size: 12.5px; line-height: 1.45;
  color: var(--txt-suave); border-left: 2px solid rgba(79, 178, 255, 0.45);
}

/* ── os quatro benefícios, em fila ───────────────────────────────────────────── */
.pmz-grade { display: grid; grid-template-columns: repeat(4, 1fr); margin: 26px 0 24px; }
.pmz-item {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: 0 12px;
  transition: transform 200ms ease;
}
/* Fio fino entre as colunas, como na referência — separa sem virar caixa. */
.pmz-item + .pmz-item { border-left: 1px solid rgba(79, 178, 255, 0.16); }
.pmz-item:hover { transform: translateY(-3px); }
.pmz-ic {
  width: 48px; height: 48px; border-radius: 50%; margin-bottom: 11px;
  display: flex; align-items: center; justify-content: center;
  color: var(--azul-claro);
  border: 1px solid rgba(79, 178, 255, 0.45);
  background: radial-gradient(circle at 50% 30%, rgba(30, 110, 200, 0.55), rgba(10, 34, 66, 0.7));
  box-shadow: 0 0 22px rgba(43, 149, 255, 0.24);
  transition: box-shadow 200ms ease, border-color 200ms ease;
}
.pmz-ic svg { width: 21px; height: 21px; }
.pmz-item:hover .pmz-ic { border-color: rgba(150, 210, 255, 0.8); box-shadow: 0 0 30px rgba(43, 149, 255, 0.45); }
.pmz-item b { font-size: 14px; font-weight: 800; color: #fff; }
.pmz-item i { margin-top: 3px; font-style: normal; font-size: 12px; line-height: 1.35; color: #9fb4cf; }

/* ── o CTA ───────────────────────────────────────────────────────────────────── */
/* É o único elemento do modal com brilho forte. Se os benefícios também brilhassem, o
   botão deixaria de ser o caminho óbvio. */
.pmz-cta {
  position: relative; overflow: hidden;
  display: flex; align-items: center; justify-content: center; gap: 12px;
  width: 100%; max-width: 520px; margin: 0 auto;
  padding: 17px 26px; border-radius: 999px; cursor: pointer;
  border: 1px solid rgba(140, 205, 255, 0.85);
  background: linear-gradient(180deg, #3fa8ff, #0d63d8);
  color: #fff; font: inherit; font-size: 15px; font-weight: 800; letter-spacing: 0.08em;
  text-transform: uppercase;
  box-shadow: 0 16px 42px rgba(20, 110, 210, 0.55), 0 0 44px rgba(43, 149, 255, 0.34);
  transition: transform 200ms ease, box-shadow 200ms ease, filter 200ms ease;
}
.pmz-cta:hover { transform: translateY(-2px); filter: brightness(1.08); box-shadow: 0 22px 54px rgba(20, 110, 210, 0.65), 0 0 60px rgba(43, 149, 255, 0.5); }
.pmz-cta:active { transform: translateY(0); }
.pmz-cta svg { width: 19px; height: 19px; display: block; }
.pmz-cta-ic, .pmz-cta-seta { display: flex; align-items: center; }
.pmz-cta-seta { transition: transform 200ms ease; }
.pmz-cta:hover .pmz-cta-seta { transform: translateX(4px); }
/* Um brilho que atravessa o botão no hover. Curto e uma vez só — brilho em loop vira
   enfeite piscando e cansa. */
.pmz-cta::after {
  content: ''; position: absolute; inset: 0 auto 0 -60%;
  width: 40%; transform: skewX(-18deg);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
  transition: left 620ms ease;
}
.pmz-cta:hover::after { left: 125%; }

.pmz-sob { margin-top: 11px; text-align: center; font-size: 12.5px; color: #7f96b3; }

.pmz-rodape {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  margin-top: 20px; padding-top: 18px;
  border-top: 1px solid rgba(79, 178, 255, 0.16);
  font-size: 13px; color: var(--azul-claro);
}
.pmz-rodape-ic { display: flex; }
.pmz-rodape svg { width: 15px; height: 15px; }

/* ── telas menores ───────────────────────────────────────────────────────────── */
@media (max-width: 780px) {
  .pmz-modal { padding: 30px 24px 22px; }
  /* O mascote sai da esquerda e vira o topo — em coluna, ele ainda apresenta a mensagem
     em vez de espremer o texto. */
  .pmz-topo { grid-template-columns: 1fr; gap: 14px; text-align: center; }
  .pmz-arte img { max-width: 150px; }
  .pmz-cabeca { justify-content: center; }
  .pmz-tit { font-size: 27px; }
  .pmz-motivo { border-left: 0; padding-left: 0; }
  .pmz-grade { grid-template-columns: repeat(2, 1fr); gap: 18px 0; }
  /* Em duas colunas o fio só faz sentido entre as colunas, não entre as linhas. */
  .pmz-item + .pmz-item { border-left: 0; }
  .pmz-item:nth-child(even) { border-left: 1px solid rgba(79, 178, 255, 0.16); }
}
@media (max-width: 460px) {
  .pmz-tit { font-size: 23px; }
  .pmz-grade { grid-template-columns: 1fr; gap: 16px; }
  .pmz-item:nth-child(even) { border-left: 0; }
  .pmz-cta { font-size: 13.5px; padding: 15px 18px; }
}

/* Quem pediu menos movimento recebe menos movimento — o modal ainda aparece, sem viagem. */
@media (prefers-reduced-motion: reduce) {
  .pmz-fundo, .pmz-modal, .pmz-item, .pmz-ic, .pmz-cta, .pmz-cta-seta { transition: none; }
  .pmz-modal { transform: none; }
  .pmz-cta::after { display: none; }
}