/* =========================================================
   Professor BeDog — camada de marca sobre o design system BeDog
   Mesma paleta; protagonista = laranja (#FF743B), teal de apoio.
   ========================================================= */

/* ---------- Marca no cabeçalho/rodapé ---------- */
.pv-brand { gap: 10px; text-decoration: none; }
.pv-brand img, .motion-on .site-header.is-scrolled .pv-brand img { width: 44px; height: 44px; }
.pv-ico { width: 1.1em; height: 1.1em; vertical-align: -0.15em; margin-right: 4px; stroke: currentColor; }
.pv-word { font-family: var(--font-display); font-weight: 700; font-size: 1.35rem; line-height: 1; color: var(--ink); display: inline-flex; flex-direction: column; }
.pv-word small { font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: var(--orange-ink); margin-top: 3px; }
.pv-word--foot { color: var(--creme); font-size: 1.8rem; margin-bottom: 14px; }
.pv-word--foot small { color: var(--amber); }
.pv-family { display: inline-flex; align-items: center; gap: 12px; margin-top: 18px; color: #CFE3E1; text-decoration: none; font-size: .9rem; }
.pv-family img { width: 96px; height: auto; margin: 0; }
.pv-family:hover span { text-decoration: underline; }

/* ---------- Abertura ---------- */
.pv-hero { background: var(--orange); position: relative; overflow: hidden; padding-block: clamp(40px, 6vw, 80px) clamp(56px, 7vw, 96px); }
.pv-hero-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(28px, 4vw, 56px); align-items: center; }
.pv-hero .eyebrow { background: #FFFDF9; }
.pv-kicker { font-family: var(--font-hand); font-size: clamp(1.7rem, 2vw + 1rem, 2.4rem); color: var(--brown); margin-top: 18px; line-height: 1; }
.pv-hero h1 { color: var(--ink); margin: 4px 0 18px; }
.pv-hero h1 .hl { color: var(--teal); }
.pv-hero .lead { color: var(--brown); font-weight: 600; max-width: 34ch; }
.pv-hero .photo-frame { transform: rotate(2deg); }
.pv-tagline { display: inline-block; margin-top: 18px; padding: 8px 16px; border: var(--border); border-radius: 999px; background: var(--amber); font-family: var(--font-display); font-weight: 600; color: var(--ink); box-shadow: var(--shadow-s); }

/* ---------- Dois caminhos (mesmo peso) ---------- */
.pv-paths { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(18px, 2.4vw, 28px); margin-top: clamp(36px, 5vw, 56px); position: relative; z-index: 2; }
.pv-path { border: var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: clamp(22px, 3vw, 34px); display: flex; flex-direction: column; gap: 10px; }
.pv-path--local { background: var(--teal); color: var(--creme); }
.pv-path--online { background: #FFFDF9; color: var(--text); }
.pv-path .tag { font-family: var(--font-display); font-weight: 600; font-size: .9rem; letter-spacing: .06em; text-transform: uppercase; }
.pv-path--local .tag { color: var(--amber); }
.pv-path--online .tag { color: var(--orange-ink); }
.pv-path h2 { font-size: clamp(1.6rem, 2vw + 0.8rem, 2.3rem); }
.pv-path--online h2 { color: var(--ink); }
.pv-path p { flex: 1; }
.pv-path--local p { color: #D6E8E6; }
.pv-path .btn { align-self: flex-start; margin-top: 8px; }
.pv-path .cta-micro { margin-top: 6px; }
.pv-path--local .cta-micro { color: #CFE3E1; }
.pv-path--local .cta-micro span::before { color: var(--amber); }

/* ---------- Desafios ---------- */
.pv-challenges { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(16px, 2vw, 24px); }
.pv-ch { background: #FFFDF9; border: var(--border); border-radius: var(--radius); box-shadow: var(--shadow-s); overflow: hidden; display: flex; flex-direction: column; }
.pv-ch img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: top; border-bottom: var(--border); background: var(--creme); }
.pv-ch-body { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.pv-ch h3 { font-size: 1.2rem; color: var(--ink); }
.pv-ch p { color: var(--muted); font-size: .93rem; flex: 1; }
.pv-ch-links { display: flex; flex-wrap: wrap; gap: 4px 14px; }
.pv-ch-links a { font-family: var(--font-display); font-weight: 600; font-size: .95rem; color: var(--teal); padding-block: 10px; text-decoration: none; }
.pv-ch-links a:hover { text-decoration: underline; }
.pv-ch-links a:first-child { color: var(--orange-ink); }

/* ---------- Como funciona (duas colunas) ---------- */
.pv-how { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(18px, 2.4vw, 28px); }
.pv-how .card { padding: clamp(22px, 3vw, 34px); }
.pv-how h3 { font-size: 1.6rem; color: var(--ink); margin-bottom: 14px; }
.pv-how ol { list-style: none; padding: 0; display: grid; gap: 14px; counter-reset: s; }
.pv-how li { counter-increment: s; display: grid; grid-template-columns: 40px 1fr; gap: 12px; align-items: start; }
.pv-how li::before { content: counter(s); width: 40px; height: 40px; border-radius: 50%; border: var(--border); display: grid; place-items: center; font-family: var(--font-display); font-weight: 700; background: var(--amber); color: var(--ink); }
.pv-how .card:last-child li::before { background: var(--orange); }
.pv-how li strong { display: block; font-family: var(--font-display); color: var(--ink); }
.pv-how li span { color: var(--muted); font-size: .95rem; }
.pv-how .btn { margin-top: 22px; }

/* ---------- Família BeDog ---------- */
.pv-family-band { display: grid; grid-template-columns: auto 1fr; gap: clamp(20px, 4vw, 48px); align-items: center; }
.pv-family-band img { width: clamp(140px, 18vw, 220px); height: auto; }

@media (max-width: 1000px) { .pv-challenges { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 900px) {
  .pv-hero-grid, .pv-paths, .pv-how { grid-template-columns: 1fr; }
  .pv-hero .photo-frame { max-width: 360px; margin-inline: auto; width: 100%; }
  .pv-family-band { grid-template-columns: 1fr; text-align: center; justify-items: center; }
}
@media (max-width: 520px) { .pv-challenges { grid-template-columns: 1fr; } .pv-ch img { aspect-ratio: 16 / 9; } }

/* ---------- Siga o Professor (Instagram) ---------- */
.pv-follow-band { display: grid; grid-template-columns: 1fr auto; gap: clamp(20px, 4vw, 48px); align-items: center; }
.pv-follow h2 { color: var(--creme); margin: 10px 0; }
.pv-follow .lead { color: #D6E8E6; max-width: 52ch; }
.pv-follow .btn .pv-ico { margin-right: 8px; }
@media (max-width: 900px) { .pv-follow-band { grid-template-columns: 1fr; text-align: center; justify-items: center; } }