/* ==========================================================================
   Richmo Media — páginas de produto e termos. Só o que a home não usa.
   Depende de tokens.css, base.css e styles.css (carregados antes).
   ========================================================================== */

/* --- Hero do produto --------------------------------------------------- */
.pp-hero { padding-block: var(--space-6) var(--space-5); }
.pp-hero__grid { display: grid; gap: var(--space-5); align-items: center; }
.pp-hero__problema { color: var(--ink-2); font-family: var(--font-mono); font-size: var(--text-sm); letter-spacing: 0.04em; }
.pp-hero__title { font-size: var(--text-2xl); line-height: var(--leading-tight); color: var(--ink-0); margin-top: var(--space-2); }
.pp-hero__lead { color: var(--ink-1); font-size: var(--text-lg); margin-top: var(--space-3); max-width: 38rem; }
.pp-hero__preco { margin-top: var(--space-4); }
.pp-hero__acoes { display: flex; gap: var(--space-2); flex-wrap: wrap; margin-top: var(--space-4); }
.pp-hero__visual img { width: 100%; height: auto; border-radius: var(--radius-lg); border: 1px solid var(--line); box-shadow: var(--shadow-soft); }

/* --- Para quem é ------------------------------------------------------- */
.perfis { display: grid; gap: var(--space-3); list-style: none; padding: 0; margin: 0; }
.perfil { padding: var(--space-4); border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface-1); }
.perfil__nome { color: var(--ink-0); font-weight: 700; display: block; margin-bottom: 0.35rem; }
.perfil p { color: var(--ink-1); }

/* --- O que está incluso ------------------------------------------------- */
.incluso { display: grid; gap: var(--space-2); list-style: none; padding: 0; margin: 0; }
.incluso li { display: grid; grid-template-columns: 1.5rem 1fr; gap: var(--space-2); color: var(--ink-1); padding: var(--space-2) 0; border-bottom: 1px solid var(--line); }
.incluso li::before { content: "◎"; color: var(--pink); font-family: var(--font-mono); }
.incluso__nota { color: var(--ink-2); font-family: var(--font-mono); font-size: var(--text-sm); margin-top: var(--space-3); }

/* --- Demonstração em moldura de celular ---------------------------------- */
.pp-demo__grid { display: grid; gap: var(--space-5); align-items: center; justify-items: center; }
.phone {
  width: min(320px, 82vw); aspect-ratio: 390 / 844; border-radius: 40px; padding: 12px;
  background: var(--surface-2); border: 1px solid var(--line-strong); box-shadow: var(--shadow-soft); position: relative;
}
.phone::before { content: ""; position: absolute; top: 12px; left: 50%; transform: translateX(-50%); width: 34%; height: 22px; background: var(--bg); border-radius: 0 0 14px 14px; z-index: 1; }
.phone__screen { width: 100%; height: 100%; border-radius: 30px; overflow: hidden; background: var(--bg); position: relative; }
.phone__screen img, .phone__screen iframe { width: 100%; height: 100%; display: block; border: 0; object-fit: cover; object-position: top; }
.phone__screen iframe { position: absolute; inset: 0; }
.pp-demo__texto { max-width: 34rem; }

/* --- Preço e comparação ---------------------------------------------------- */
.compara { width: 100%; border-collapse: collapse; margin-top: var(--space-4); font-size: var(--text-sm); }
.compara th, .compara td { text-align: left; padding: var(--space-2) var(--space-2); border-bottom: 1px solid var(--line); vertical-align: top; color: var(--ink-1); }
.compara thead th { color: var(--ink-0); font-family: var(--font-mono); font-weight: 400; font-size: var(--text-xs); letter-spacing: var(--tracking-wide); text-transform: uppercase; }
.compara td:first-child, .compara th[scope="row"] { color: var(--ink-2); font-family: inherit; font-weight: 400; font-size: inherit; letter-spacing: normal; text-transform: none; }
.compara .compara--richmo { color: var(--ink-0); background: var(--grad-soft); }
.pp-preco__selo { display: inline-block; margin-top: var(--space-3); font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: 0.06em; color: var(--pink); border: 1px solid var(--pink); border-radius: var(--radius-pill); padding: 0.35rem 0.8rem; }
.compara-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* --- FAQ (details nativo, sem JS) ------------------------------------------ */
.faq { display: grid; gap: var(--space-2); }
.faq details { border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface-1); padding: 0 var(--space-3); }
.faq summary { cursor: pointer; padding: var(--space-3) 0; color: var(--ink-0); font-weight: 700; list-style: none; display: flex; justify-content: space-between; gap: var(--space-2); min-height: 44px; align-items: center; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-family: var(--font-mono); color: var(--pink); }
.faq details[open] summary::after { content: "−"; }
.faq details p { color: var(--ink-1); padding-bottom: var(--space-3); }

/* --- CTA final ----------------------------------------------------------- */
.pp-final { text-align: center; }
.pp-final .preco { justify-content: center; margin-block: var(--space-3); }

/* --- Termos ------------------------------------------------------------- */
.termos { max-width: 44rem; }
.termos h2 { font-size: var(--text-xl); color: var(--ink-0); margin-top: var(--space-5); }
.termos p, .termos li { color: var(--ink-1); line-height: var(--leading-body); margin-top: var(--space-2); }
.termos ol, .termos ul { padding-left: 1.25rem; }
.termos__meta { font-family: var(--font-mono); font-size: var(--text-sm); color: var(--ink-2); }

@media (min-width: 768px) {
  .pp-hero__grid { grid-template-columns: 1.1fr 0.9fr; }
  .perfis { grid-template-columns: repeat(3, 1fr); }
  .pp-demo__grid { grid-template-columns: auto 1fr; justify-items: start; }
}