/* ==========================================================================
   PROTOCOLO TIKTOK MILIONÁRIO — Componentes
   Depende de tokens/tokens.css. Prefixo .ptm- em tudo.
   ========================================================================== */

/* ---------- BASE --------------------------------------------------------- */
/* border-box global: sem isto, width:100% somado a padding estoura o container
   e o overflow:clip corta o conteúdo em silêncio. */
*, *::before, *::after{ box-sizing: border-box }
/* O <picture> não gera caixa própria: o <img> mantém o layout de antes. */
picture{ display: contents }

.ptm-root{
  background: var(--ptm-off-white);
  color: var(--ptm-texto);
  font-family: var(--ptm-font-texto);
  -webkit-font-smoothing: antialiased;
  text-wrap: pretty;
}

/* ---------- TIPOGRAFIA --------------------------------------------------- */
.ptm-display{
  font-family: var(--ptm-font-titulo); font-weight: 800;
  font-size: var(--t-display); line-height: var(--ptm-lh-display);
  letter-spacing: var(--ptm-track-display);
  margin: 0; text-wrap: balance;
}
.ptm-titulo{
  font-family: var(--ptm-font-titulo); font-weight: 700;
  font-size: var(--t-h2); line-height: var(--ptm-lh-titulo);
  letter-spacing: var(--ptm-track-titulo);
  margin: 0; text-wrap: balance;
}
.ptm-sub{
  font-family: var(--ptm-font-texto); font-weight: 400;
  font-size: var(--t-sub); line-height: var(--ptm-lh-sub);
  color: var(--ptm-texto-2); margin: 0;
}
.ptm-texto{
  font-family: var(--ptm-font-texto); font-weight: 400;
  font-size: var(--t-corpo); line-height: var(--ptm-lh-texto);
  color: var(--ptm-texto-2); margin: 0;
}
/* Rótulo: caixa alta, tracking .2em, MÁX. 5 palavras. */
.ptm-rotulo{
  font-family: var(--ptm-font-texto); font-weight: 600;
  font-size: var(--t-rotulo); line-height: 1;
  letter-spacing: var(--ptm-track-rotulo); text-transform: uppercase;
  color: var(--ptm-texto-3); margin: 0;
}
.ptm-rotulo--ouro{ color: var(--ptm-ouro-profundo); }

/* Número/valor em destaque. Ouro só acima de 24px; abaixo disso use --ouro-profundo. */
.ptm-valor{
  font-family: var(--ptm-font-titulo); font-weight: 800;
  letter-spacing: var(--ptm-track-display); line-height: 1;
  background: var(--ptm-grad-ouro); -webkit-background-clip: text;
  background-clip: text; color: transparent;
}

/* ---------- BOTÃO -------------------------------------------------------- */
.ptm-btn{
  display: inline-flex; align-items: center; justify-content: center; gap: var(--ptm-e-2);
  font-family: var(--ptm-font-texto); font-weight: 700;
  font-size: var(--t-corpo); line-height: 1;
  letter-spacing: -.01em;
  padding: 20px 36px; border-radius: var(--ptm-raio-pilula);
  border: 0; cursor: pointer; text-decoration: none;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.ptm-btn:hover{ transform: translateY(-1px); }
.ptm-btn:active{ transform: translateY(0); }
.ptm-btn:focus-visible{ outline: 3px solid var(--ptm-ouro-profundo); outline-offset: 3px; }

/* Primário — o CTA. Gradiente ouro, texto preto fosco (contraste real sobre ouro). */
.ptm-btn--primario{
  background: var(--ptm-grad-ouro); color: var(--ptm-preto);
  box-shadow: var(--ptm-sombra-botao);
}
.ptm-btn--primario:hover{ box-shadow: 0 4px 18px rgba(219,104,56,.36); }

/* Secundário — contorno preto fosco sobre claro. */
.ptm-btn--secundario{
  background: transparent; color: var(--ptm-preto);
  box-shadow: inset 0 0 0 1.5px var(--ptm-linha-forte);
}
.ptm-btn--secundario:hover{ box-shadow: inset 0 0 0 1.5px var(--ptm-preto); }

/* Fantasma — link de ação, sem caixa. */
.ptm-btn--fantasma{
  background: transparent; color: var(--ptm-ouro-profundo); padding: 12px 4px;
}
.ptm-btn--fantasma:hover{ color: var(--ptm-ouro-de); }

.ptm-btn--g{ padding: 24px 48px; font-size: var(--t-sub); }
.ptm-btn--p{ min-height: 44px; padding: 14px 24px; font-size: var(--t-apoio); }
.ptm-btn--bloco{ display: flex; width: 100%; }

/* ---------- SELO PÍLULA -------------------------------------------------- */
/* Mesma forma do "Protocolo" no logo: fundo claro, contorno em gradiente.
   NUNCA preenchida de cor. Etiqueta de lote, data e bônus. */
.ptm-selo{
  display: inline-flex; align-items: center; gap: var(--ptm-e-2);
  padding: 10px 20px; border-radius: var(--ptm-raio-pilula);
  font-family: var(--ptm-font-texto); font-weight: 600;
  font-size: var(--t-rotulo); line-height: 1;
  letter-spacing: var(--ptm-track-rotulo); text-transform: uppercase;
  color: var(--ptm-preto);
  border: 1.5px solid transparent;
  background:
    linear-gradient(var(--ptm-areia), var(--ptm-areia)) padding-box,
    var(--ptm-grad-ouro-135) border-box;
}
/* Virada de lote / prazo — o único lugar do magenta. Continua contorno, não preenchimento. */
.ptm-selo--prazo{
  background:
    linear-gradient(var(--ptm-areia), var(--ptm-areia)) padding-box,
    var(--ptm-grad-plataforma) border-box;
}
.ptm-selo--prazo .ptm-selo__ponto{ background: var(--ptm-magenta); }
.ptm-selo__ponto{
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--ptm-ouro-de); flex: none;
}

/* ---------- FAÍSCA ------------------------------------------------------- */
/* Pontuação de quatro pontas em ouro. MÁX. 3 por peça. */
.ptm-faisca{
  display: inline-block; color: var(--ptm-ouro-ate);
  font-size: 1em; line-height: 1; user-select: none;
}

/* ---------- CARTÃO ------------------------------------------------------- */
.ptm-cartao{
  background: var(--ptm-areia);
  border: 1px solid var(--ptm-areia-escura);
  border-radius: var(--ptm-raio-cartao);
  padding: var(--ptm-e-6);
}
.ptm-cartao--elevado{ box-shadow: var(--ptm-sombra-cartao); border-color: transparent; }

/* Prova social — print/depoimento na moldura dourada fina, com nome da aluna.
   Sem colagem de dezenas de prints minúsculos. */
.ptm-prova{
  border: var(--ptm-borda-moldura) solid transparent;
  border-radius: var(--ptm-raio-cartao);
  background:
    linear-gradient(var(--ptm-areia), var(--ptm-areia)) padding-box,
    var(--ptm-grad-ouro-135) border-box;
  padding: var(--ptm-e-6);
}
.ptm-prova__autor{
  display: flex; align-items: center; gap: var(--ptm-e-3);
  margin-top: var(--ptm-e-5); padding-top: var(--ptm-e-4);
  border-top: 1px solid var(--ptm-areia-escura);
}
.ptm-prova__avatar{
  width: 40px; height: 40px; border-radius: 50%; object-fit: cover; flex: none;
  background: var(--ptm-areia-escura);
}

/* ---------- CAMPO DE FORMULÁRIO ------------------------------------------ */
.ptm-campo{ display: block; }
.ptm-campo__rotulo{
  display: block; margin-bottom: var(--ptm-e-2);
  font-family: var(--ptm-font-texto); font-weight: 600;
  font-size: var(--t-apoio); color: var(--ptm-texto-2);
}
.ptm-campo__entrada{
  width: 100%; box-sizing: border-box;
  padding: 18px 20px; border-radius: var(--ptm-raio-campo);
  border: 1.5px solid var(--ptm-areia-escura); background: var(--ptm-branco);
  font-family: var(--ptm-font-texto); font-weight: 500;
  font-size: var(--t-corpo); color: var(--ptm-texto);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.ptm-campo__entrada::placeholder{ color: var(--ptm-texto-3); font-weight: 400; }
.ptm-campo__entrada:focus{
  outline: 0; border-color: var(--ptm-ouro-de);
  box-shadow: 0 0 0 4px rgba(219,104,56,.14);
}

/* ---------- DIVISOR ------------------------------------------------------ */
.ptm-divisor{ height: 1px; background: var(--ptm-linha); border: 0; margin: 0; }
.ptm-divisor--ouro{ height: 2px; background: var(--ptm-grad-ouro); border-radius: 2px; }

/* ---------- ASSINATURA --------------------------------------------------- */
/* Pé de peça de feed: filete dourado + nome. */
.ptm-assinatura{
  display: flex; align-items: center; gap: var(--ptm-e-3);
  font-family: var(--ptm-font-texto); font-weight: 600;
  font-size: var(--t-apoio); color: var(--ptm-texto-2);
}
.ptm-assinatura__filete{
  width: 28px; height: 2px; border-radius: 2px;
  background: var(--ptm-grad-ouro); flex: none;
}

/* ---------- LISTA DE ENTREGA --------------------------------------------- */
.ptm-lista{ list-style: none; margin: 0; padding: 0; display: grid; gap: var(--ptm-e-4); }
/* O marcador é absoluto, não item de grade. Com `display:grid` cada filho
   inline do <li> virava uma célula, e o texto depois de um <strong> caía numa
   coluna de 22px, quebrando uma palavra por linha. */
.ptm-lista li{
  position: relative; padding-left: 26px;
  font-family: var(--ptm-font-texto); font-size: var(--t-corpo);
  line-height: var(--ptm-lh-texto); color: var(--ptm-texto-2);
}
/* Marcador: traço curto em ouro.
   NÃO use a faísca como bullet — ela tem teto de 3 por peça. */
.ptm-lista li::before{
  content: ""; position: absolute; left: 0; top: .68em;
  width: 14px; height: 2px; border-radius: 2px; background: var(--ptm-grad-ouro);
}
/* Variante de exclusão — mesma forma, tinta neutra. */
.ptm-lista--fora li::before{ background: var(--ptm-linha-forte); }

/* ---------- GRADE DE PEÇA ------------------------------------------------ */
.ptm-secao{ padding: var(--ptm-e-11) var(--ptm-e-10); }
.ptm-container{ max-width: 1120px; margin: 0 auto; }