/* Popup promocional de canto — entra depois que a animação do topo termina.
   Fica no canto INFERIOR ESQUERDO pra não brigar com o WhatsApp flutuante
   (que mora no inferior direito, z-index 999). */

.promo-pop {
  position: fixed;
  right: 32px;
  left: auto;
  bottom: 32px;
  z-index: 998;
  width: min(520px, calc(100vw - 40px));

  display: none;
  flex-direction: column;
  border-radius: 0; /* cantos retos, sem arredondar */
  overflow: hidden;
  background: var(--black, #0d0d0d);
  box-shadow: 0 16px 52px rgba(0, 0, 0, 0.4);

  opacity: 0;
  /* Sai de baixo da tela e sobe: 100% do próprio card + a margem de baixo. */
  transform: translateY(calc(100% + 32px));
  transition: opacity 0.45s ease, transform 0.75s cubic-bezier(0.16, 1, 0.3, 1);
}

/* .is-mounted entra no DOM (display) e .is-open dispara a animação no frame
   seguinte — sem os dois passos o browser não anima a partir do display:none. */
.promo-pop.is-mounted { display: flex; }
.promo-pop.is-open {
  opacity: 1;
  transform: translateY(0);
}

/* Recolhido enquanto a seção de contato está à vista, para não cobrir o botão
   "Enviar"/aceite do formulário (mesmo canto). Vem depois de .is-open de
   propósito, para vencer por ordem de fonte. */
.promo-pop.is-hidden-by-contact {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(calc(100% + 32px));
}

/* A arte entra inteira (é deitada, 3:2). Cortar não dá: a barra de benefícios
   atravessa toda a largura, então qualquer corte picota um benefício no meio
   da palavra. Clicar abre ela ampliada. */
.promo-pop__link {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  line-height: 0;
  cursor: zoom-in;
}
.promo-pop__link:focus-visible { outline: 3px solid var(--red, #c61c1c); outline-offset: -3px; }
.promo-pop__link img {
  display: block;
  width: 100%;
  height: auto;
}

/* Dica de que dá pra ampliar: só no hover, pra não tapar o rodapé da arte
   (telefone e site) enquanto a pessoa lê. */
.promo-pop__zoom {
  position: absolute;
  inset: 0;

  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;

  background: rgba(0, 0, 0, 0.42);
  color: #fff;

  font-family: var(--font-body, sans-serif);
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.03em;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);

  opacity: 0;
  transition: opacity var(--transition, 0.3s ease);
}
.promo-pop__link:hover .promo-pop__zoom,
.promo-pop__link:focus-visible .promo-pop__zoom { opacity: 1; }
.promo-pop__zoom svg { width: 17px; height: 17px; fill: currentColor; }

/* Em telas de toque não existe hover: deixa um selo discreto sempre visível. */
@media (hover: none) {
  .promo-pop__zoom {
    inset: auto 8px 8px auto;
    padding: 5px 9px;
    gap: 5px;
    background: rgba(0, 0, 0, 0.6);
    font-size: 0.5rem;
    opacity: 0.92;
  }
  .promo-pop__zoom svg { width: 11px; height: 11px; }
}

.promo-pop__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;

  padding: 14px 16px;
  background: #25d366;
  color: var(--white, #fff);

  font-family: var(--font-body, sans-serif);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.2;
  text-decoration: none;

  transition: background var(--transition, 0.3s ease);
}
.promo-pop__cta:hover,
.promo-pop__cta:focus-visible { background: #1eb457; }
.promo-pop__cta svg {
  width: 19px;
  height: 19px;
  flex: none;
  fill: currentColor;
}

.promo-pop__close {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;

  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;

  border: 0;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(4px);
  color: #fff;

  font-size: 21px;
  line-height: 1;
  cursor: pointer;

  transition: background var(--transition, 0.3s ease), transform var(--transition, 0.3s ease);
}
.promo-pop__close:hover { background: rgba(0, 0, 0, 0.8); transform: scale(1.08); }
.promo-pop__close:focus-visible { outline: 3px solid var(--red, #c61c1c); outline-offset: 2px; }

/* ---- Imagem ampliada (abre ao clicar na arte) ---- */
.promo-zoom {
  position: fixed;
  inset: 0;
  z-index: 1200;

  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;

  background: rgba(0, 0, 0, 0.88);
  backdrop-filter: blur(6px);
  cursor: zoom-out;

  opacity: 0;
  transition: opacity 0.35s ease;
}
.promo-zoom.is-mounted { display: flex; }
.promo-zoom.is-open { opacity: 1; }

.promo-zoom__img {
  display: block;
  max-width: min(1200px, 94vw);
  max-height: 88vh;
  width: auto;
  height: auto;
  border-radius: 0;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.6);

  transform: scale(0.94);
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.promo-zoom.is-open .promo-zoom__img { transform: scale(1); }

.promo-zoom__close {
  position: absolute;
  top: 20px;
  right: 24px;

  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;

  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.14);
  color: #fff;

  font-size: 28px;
  line-height: 1;
  cursor: pointer;

  transition: background var(--transition, 0.3s ease), transform var(--transition, 0.3s ease);
}
.promo-zoom__close:hover { background: rgba(255, 255, 255, 0.26); transform: scale(1.08); }
.promo-zoom__close:focus-visible { outline: 3px solid var(--red, #c61c1c); outline-offset: 2px; }

/* Celular: ocupa a largura toda e sobe pra cima do botão do WhatsApp. */
@media (max-width: 768px) {
  .promo-pop {
    right: 12px;
    left: auto;
    bottom: 104px;
    /* menor no celular: um card compacto no canto, em vez de quase a tela toda */
    width: min(250px, calc(100vw - 24px));
  }
  .promo-pop { transform: translateY(calc(100% + 104px)); }
  .promo-pop.is-open { transform: translateY(0); }
  .promo-zoom { padding: 14px; }
  .promo-zoom__close { top: 12px; right: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .promo-pop,
  .promo-zoom__img { transition: opacity 0.2s linear; transform: none; }
  .promo-pop.is-open,
  .promo-zoom.is-open .promo-zoom__img { transform: none; }
}