/* Páginas de produto (Sales Coach e Atlas): ritmo de seção, cabeçalhos, hero
   centralizado, tour por abas e palco das telas. Cada página tem o seu CSS
   para o que é só dela. */


.pr-sec { padding: clamp(64px, 8vw, 112px) 0; border-top: 1px solid var(--line); }
.pr-cab { display: flex; flex-direction: column; gap: 16px; margin-bottom: clamp(32px, 4vw, 52px); max-width: 860px; }
.pr-cab .h-l { font-size: clamp(34px, 4.4vw, 64px); }

/* ── Hero ─────────────────────────────────────────────────────────────── */
.pr-hero { padding: clamp(40px, 6vw, 84px) 0 clamp(56px, 7vw, 96px); position: relative; overflow: hidden; }
.pr-hero::before { content: ""; position: absolute; left: 50%; top: 38%; width: 1100px; height: 700px; translate: -50% 0; pointer-events: none;
  background: radial-gradient(closest-side, rgba(212,249,105,.14), transparent 75%); }
html[data-tema="claro"] .pr-hero::before { background: radial-gradient(closest-side, rgba(212,249,105,.45), transparent 75%); }
.pr-hero-txt { position: relative; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 22px; max-width: 900px; margin: 0 auto; }
.pr-hero-txt .h-xl { font-size: clamp(46px, 7vw, 108px); }
.pr-hero-txt .lead { text-align: center; max-width: 720px; }
.pr-hero-txt .pills { justify-content: center; margin-top: 6px; }
.pr-marca { display: inline-flex; align-items: center; gap: 12px; }
.pr-marca img { border-radius: 7px; }

/* ── Tour por abas ────────────────────────────────────────────────────── */
.tour-abas { display: flex; gap: 6px; border-bottom: 1px solid var(--line2); margin-bottom: clamp(26px, 3.4vw, 44px); overflow-x: auto; scrollbar-width: none; }
.tour-abas::-webkit-scrollbar { display: none; }
.tour-abas button { position: relative; flex: 1 0 auto; display: flex; align-items: baseline; gap: 10px; padding: 16px 18px 18px 0; text-align: left; font-family: var(--display); font-size: 19px; letter-spacing: -.01em; color: var(--dim2); transition: color .3s; white-space: nowrap; }
.tour-abas button em { font-style: normal; font-family: var(--mono); font-size: 11px; letter-spacing: .12em; }
.tour-abas button:hover { color: var(--dim); }
.tour-abas button.on { color: var(--txt); }
.tour-abas button i { position: absolute; left: 0; right: 18px; bottom: -1px; height: 2px; background: var(--line2); overflow: hidden; }
.tour-abas button i::after { content: ""; position: absolute; inset: 0; width: 0; background: var(--acento); }
.tour-abas button.on i::after { width: 100%; }
.tour.rodando .tour-abas button.on i::after { width: 0; animation: tour-prog var(--dur, 7s) linear forwards; }
@keyframes tour-prog { to { width: 100%; } }
.tour-paineis { display: grid; }
.tour-p { grid-area: 1 / 1; display: grid; grid-template-columns: minmax(280px, .78fr) 1.22fr; gap: clamp(28px, 4vw, 60px); align-items: center;
  visibility: hidden; opacity: 0; transform: translateY(10px); transition: opacity .45s, transform .55s cubic-bezier(.2,.7,.2,1), visibility 0s .45s; }
.tour-p.on { visibility: visible; opacity: 1; transform: none; transition: opacity .45s .05s, transform .55s .05s cubic-bezier(.2,.7,.2,1), visibility 0s; }
.tour-abas button:focus:not(:focus-visible) { outline: none; }
.tour-abas button:focus-visible { outline: 2px solid var(--acento); outline-offset: -2px; border-radius: 6px; }
.tp-txt { display: flex; flex-direction: column; gap: 14px; }
.tp-txt h3 { font-family: var(--display); font-weight: 300; font-size: clamp(30px, 3.2vw, 46px); letter-spacing: -.04em; line-height: 1.04; }
.tp-txt p { color: var(--dim); font-size: 17px; }
.tp-txt ul { list-style: none; display: flex; flex-direction: column; gap: 9px; margin-top: 4px; }
.tp-txt li { display: flex; gap: 10px; font-size: 15.5px; } .tp-txt li::before { content: "↗"; color: var(--acento); }

.tp-palco { position: relative; border-radius: 24px; padding: clamp(16px, 2.4vw, 30px); background: radial-gradient(70% 80% at 70% 30%, rgba(212,249,105,.12), transparent 70%), rgba(var(--fg-rgb),.03); border: 1px solid var(--line); }
html[data-tema="claro"] .tp-palco { background: radial-gradient(70% 80% at 70% 30%, rgba(212,249,105,.4), transparent 70%), #e9ebe2; border-color: transparent; }
.cartao { display: block; width: 100%; height: auto; border-radius: 14px; box-shadow: 0 0 0 1px rgba(16,18,14,.06), 0 24px 50px -28px rgba(0,0,0,.6); background: #fff; }
html[data-tema="claro"] .cartao { box-shadow: 0 0 0 1px rgba(16,18,14,.06), 0 24px 50px -30px rgba(30,40,10,.4); }
.tp-palco.pilha { display: flex; flex-direction: column; gap: 14px; }
.tp-palco .duo { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.tp-palco .etq { position: absolute; top: -13px; left: 26px; font-family: var(--mono); font-size: 11.5px; letter-spacing: .08em; background: var(--lime); color: #10120e; padding: 7px 12px; border-radius: 99px; }
.cartao.campos { padding: 20px 22px; color: #0f1d33; font-family: 'Poppins', var(--body); }
.cartao.campos b { display: block; font-size: 15px; font-weight: 600; margin-bottom: 12px; }
.cartao.campos dl { display: grid; grid-template-columns: auto 1fr; gap: 8px 20px; font-size: 14px; }
.cartao.campos dt { color: #5b6b82; } .cartao.campos dd { font-weight: 600; }
.tp-palco.lado { display: grid; grid-template-columns: 1fr 300px; gap: 20px; align-items: center; }
.cartao.estreito { width: 100%; }
.perguntas { display: flex; flex-direction: column; gap: 10px; }
.perguntas span { align-self: flex-start; padding: 11px 15px; border-radius: 16px 16px 16px 4px; background: var(--card); border: 1px solid var(--line); font-size: 14.5px; line-height: 1.35; }
.perguntas span:nth-child(2) { margin-left: 18px; } .perguntas span:nth-child(3) { margin-left: 36px; }
html[data-tema="claro"] .perguntas span { background: #fff; border-color: transparent; box-shadow: 0 10px 24px -16px rgba(30,40,10,.35); }


@media (max-width: 980px) { .tour-p { grid-template-columns: 1fr; } }
@media (max-width: 760px) {
  .tour-abas button { font-size: 16px; padding-right: 14px; }
  .tp-palco.lado { grid-template-columns: 1fr; }
  .tp-palco .duo { grid-template-columns: 1fr; }
  .perguntas span:nth-child(n) { margin-left: 0; }
}
@media (prefers-reduced-motion: reduce) { .tour-p, .tour-p.on { transition: none; transform: none; } }