/* Comum aos modelos de referência.
   Só o que é da MARCA (manual da Pling) e o que é do MODELO (faixa, pendente, aviso).
   Cada modelo define os próprios papéis de cor em cima destas constantes. */

:root {
  --marca-azul-lilas: #5C659E;  /* RGB 92 101 158  — manual p. 5 */
  --marca-roxo: #8C6EA0;        /* RGB 140 110 160 — manual p. 5; texto só >= 24px */
  --marca-prata-claro: #D9D8DE;
  --marca-prata: #8F8D9B;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}
img, svg { display: block; max-width: 100%; }
img { height: auto; }
body { margin: 0; }

/* Pular para o conteúdo */
.pular {
  position: absolute; left: 1rem; top: -4rem; z-index: 100;
  background: #fff; color: #23243A; padding: .75rem 1rem; border-radius: 8px;
  font: 500 1rem/1 "Jost", system-ui, sans-serif;
}
.pular:focus { top: 3rem; }

/* Faixa "modelo de referência" */
.faixa-modelo {
  position: relative; z-index: 60;
  background: #23243A; color: #E9E7F0;
  font: 400 .8125rem/1.4 "Jost", system-ui, sans-serif;
  text-align: center; padding: .5rem 1rem;
}
.faixa-modelo strong { font-weight: 600; color: #fff; }
.faixa-modelo a { color: #fff; text-underline-offset: 3px; }
/* aviso no site no ar (18/09): "Site em construção · lançamento em breve"; só o pacote da Hostinger usa */
.faixa-aviso {
  position: relative; z-index: 60;
  background: #3A3150; color: #E9E7F0;
  font: 400 .8125rem/1.4 "Jost", system-ui, sans-serif; letter-spacing: .02em;
  text-align: center; padding: .5rem 1rem;
}
.faixa-aviso strong { font-weight: 600; color: #fff; }

/* Dado que falta: visível de propósito, para a cliente ver o buraco */
.pendente {
  display: inline-block;
  font: 500 .8125rem/1.3 "Jost", system-ui, sans-serif;
  letter-spacing: .02em;
  color: #4A3D5C;
  background: #F1ECF6;
  border: 1px dashed #8C6EA0;
  border-radius: 6px;
  padding: .15rem .45rem;
  vertical-align: middle;
}

/* WhatsApp no canto da tela — igual nos quatro modelos.
   Verde mais fechado que o oficial (#25D366 dá 1,98:1): #1DA851 dá 3,10:1 com o ícone branco e contra fundo branco. */
.whats {
  position: fixed; z-index: 45;
  right: max(1rem, env(safe-area-inset-right)); bottom: calc(1rem + env(safe-area-inset-bottom));
  display: grid; place-items: center;
  width: 60px; height: 60px; border-radius: 50%;
  background: #1DA851; color: #fff; text-decoration: none;
  box-shadow: 0 10px 28px -8px rgba(20, 60, 35, .55), 0 2px 6px rgba(0, 0, 0, .12);
  transition: background-color .2s ease;
}
.whats:hover { background: #189D4A; }
.whats:focus-visible { outline: 3px solid #0F5E2C; outline-offset: 3px; }
.whats svg { width: 30px; height: 30px; fill: currentColor; }
.whats__rotulo {                        /* no computador: etiqueta ao lado, ao passar o mouse (texto escuro no branco: 16:1) */
  position: absolute; right: calc(100% + 12px); top: 50%;
  padding: .6rem .9rem; border-radius: 999px; white-space: nowrap;
  background: #fff; color: #1F2033; box-shadow: 0 8px 24px -10px rgba(20, 20, 40, .45);
  font: 500 .9375rem/1 "Jost", system-ui, sans-serif;
  opacity: 0; transform: translate(6px, -50%); pointer-events: none;
  transition: opacity .2s ease, transform .2s ease;
}
@media (hover: hover) and (min-width: 900px) {
  .whats:hover .whats__rotulo, .whats:focus-visible .whats__rotulo { opacity: 1; transform: translate(0, -50%); }
}
@media (min-width: 900px) { .whats { right: 1.5rem; bottom: 1.5rem; } }

/* Aviso do modelo: no lugar de abrir o WhatsApp, mostra a mensagem */
.aviso-modelo {
  position: fixed; z-index: 90;
  left: 50%; bottom: calc(5.5rem + env(safe-area-inset-bottom)); transform: translateX(-50%);
  width: min(30rem, calc(100% - 2rem));
  background: #23243A; color: #fff;
  border-radius: 14px; padding: 1rem 1.1rem 1.1rem;
  box-shadow: 0 18px 50px -12px rgba(20, 18, 40, .45);
  font: 400 .9375rem/1.5 "Jost", system-ui, sans-serif;
}
.aviso-modelo p { margin: 0 0 .5rem; color: #D9D6E6; font-size: .8125rem; }
.aviso-modelo blockquote {
  margin: 0; padding: .7rem .85rem; border-radius: 10px;
  background: rgba(255, 255, 255, .08); color: #fff;
}
.aviso-modelo button {
  position: absolute; top: .45rem; right: .45rem;
  width: 44px; height: 44px; border: 0; border-radius: 10px;
  background: transparent; color: #fff; font-size: 1.4rem; cursor: pointer;
}
.aviso-modelo button:focus-visible { outline: 2px solid #fff; outline-offset: -4px; }