/* =============================================================
   PRIORIZE VIAJAR · site (link da bio + LPs)
   Depende de tokens.css e priorize.css, copiados do Design System por
   ../sync-ds.sh. Aqui só o que é layout de página.
   ============================================================= */

/* ---------- comum ---------- */
.topo { position: sticky; top: 0; z-index: 10; background: color-mix(in oklab, var(--pv-nude) 92%, transparent); backdrop-filter: blur(8px); border-bottom: var(--pv-fio); }
.topo__in { display: flex; align-items: center; justify-content: space-between; gap: var(--pv-e-16); padding-block: var(--pv-e-12); }
.topo__logo { height: 44px; width: auto; }
/* marca em texto pra barra: o logo a 44 px de altura teria 41 px de largura, abaixo do mínimo (140) */
.marca-texto { display: inline-flex; align-items: baseline; gap: 0.18em; text-decoration: none; font-family: var(--pv-fonte-display); font-size: var(--pv-t-titulo-3); line-height: 1; color: var(--pv-terracota); }
.marca-texto .pv-script { font-size: 1.05em; transform: rotate(-4deg); }
.topo .pv-btn { min-height: 44px; padding-inline: var(--pv-e-24); font-size: var(--pv-t-rotulo); }
.rodape { padding-block: var(--pv-e-48); font-size: var(--pv-t-rotulo); text-align: center; opacity: 0.8; }
.rodape img { width: 140px; height: auto; margin: 0 auto var(--pv-e-16); }   /* 140 = mínimo do logo */
.rodape a { text-decoration: none; }
.pv-titulo-secao { max-width: 22ch; }
.pv-lead-secao { max-width: 58ch; margin-top: var(--pv-e-12); }

/* ---------- link da bio ---------- */
.bio { width: min(480px, 100% - 2 * var(--pv-e-16)); margin-inline: auto; padding-block: var(--pv-e-32) var(--pv-e-48); }
.bio__topo { text-align: center; display: flex; flex-direction: column; align-items: center; gap: var(--pv-e-12); }
.bio__logo { width: 150px; }
.bio__foto { width: 104px; height: 104px; border-radius: 50%; object-fit: cover; border: 4px solid var(--pv-branco); box-shadow: var(--pv-sombra); background: var(--pv-areia-clara); display: grid; place-items: center; font-family: var(--pv-fonte-display); font-size: 44px; color: var(--pv-terracota); }
.bio__nome { font-weight: var(--pv-peso-rotulo); font-size: var(--pv-t-corpo-grande); line-height: 1.2; }
.bio__sub { font-size: var(--pv-t-rotulo); opacity: 0.8; max-width: 30ch; }
.bio__h1 { font-family: var(--pv-fonte-display); font-weight: 400; font-size: 2.125rem; line-height: 1.05; margin-top: var(--pv-e-8); max-width: 15ch; letter-spacing: -0.01em; }
.bio__lista { display: grid; gap: var(--pv-e-16); margin-top: var(--pv-e-32); }
.bio__card { display: block; text-decoration: none; }
.bio__card .pv-produto { grid-template-columns: 104px 1fr; }
.bio__card .pv-produto__titulo { font-size: 1.5rem; }
.bio__card .pv-lista { font-size: var(--pv-t-rotulo); gap: var(--pv-e-8); margin-top: var(--pv-e-8); }
.bio__card .pv-lista li::before { width: 1.25em; height: 1.25em; }
.bio__card--curso { background: var(--pv-terracota); color: var(--pv-nude); }
.bio__card--breve { background: var(--pv-areia-clara); box-shadow: none; }
.bio__card--breve .pv-produto__capa { background: var(--pv-nude); display: grid; place-items: center; font-family: var(--pv-fonte-display); font-size: 44px; color: var(--pv-areia); }
.bio__acao { margin-top: var(--pv-e-12); display: flex; align-items: center; gap: var(--pv-e-12); flex-wrap: wrap; }
.bio__preco { font-family: var(--pv-fonte-display); font-size: var(--pv-t-titulo-3); }
.bio__links { display: grid; gap: var(--pv-e-12); margin-top: var(--pv-e-32); }
.bio__links .pv-btn { width: 100%; }
.bio__rodape { margin-top: var(--pv-e-48); text-align: center; font-size: var(--pv-t-micro); opacity: 0.7; }

/* capa do produto desenhada em CSS (não há foto do e-book) */
.capa { position: relative; aspect-ratio: 4 / 5; border-radius: var(--pv-raio-s); overflow: hidden; background: var(--pv-terracota); color: var(--pv-nude); container-type: inline-size; display: flex; flex-direction: column; padding: 9%; }
.capa__logo { width: 50%; }                                   /* 140 px no hero de 280: o mínimo do logo */
.capa__marca { display: none; font-family: var(--pv-fonte-texto); font-weight: 500; font-size: 5.2cqw; line-height: 1.2; text-transform: uppercase; letter-spacing: 0.1em; color: var(--pv-areia); }
/* na bio a capa tem 104 px: o logo ficaria com 44 px, abaixo do mínimo de 140. Entra o nome em texto (regra do DS) */
.bio__card .capa__logo { display: none; }
.bio__card .capa__marca { display: block; }
.bio__card--curso .capa { background: var(--pv-verde); }
.capa__titulo { margin-top: auto; font-family: var(--pv-fonte-display); font-size: 13cqw; line-height: 1; }
.capa__titulo .pv-script { font-size: 1.15em; display: block; margin-top: 0.1em; transform: rotate(-3deg); }
.capa__rotulo { font-size: 5.2cqw; font-weight: 500; text-transform: uppercase; letter-spacing: 0.1em; color: var(--pv-areia); margin-top: 5cqw; }
.capa__petala { position: absolute; right: -18%; top: 34%; width: 62%; opacity: 0.12; }

/* ---------- LP ---------- */
.hero { padding-block: var(--pv-e-48) var(--pv-e-64); }
.hero__grid { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: var(--pv-e-48); align-items: center; }
.hero__h1 { margin-top: var(--pv-e-16); max-width: 16ch; }
.hero__sub { margin-top: var(--pv-e-16); max-width: 52ch; }
.hero__chips { display: flex; flex-wrap: wrap; gap: var(--pv-e-8); margin-top: var(--pv-e-24); }
.hero__cta { display: flex; flex-wrap: wrap; gap: var(--pv-e-12); align-items: center; margin-top: var(--pv-e-32); }
.hero__micro { margin-top: var(--pv-e-12); font-size: var(--pv-t-rotulo); opacity: 0.75; }
.hero__capa { position: relative; width: min(360px, 100%); margin-inline: auto; }
.hero__capa .capa { box-shadow: 0 24px 60px rgba(127, 63, 42, 0.22); transform: rotate(2deg); border-radius: var(--pv-raio); }
.hero__selo { position: absolute; top: -14px; left: -14px; z-index: 2; }
.hero__selo .pv-selo { font-size: var(--pv-t-corpo); padding: 0.5em 0.9em; box-shadow: var(--pv-sombra); }
.hero__autora { position: absolute; right: -8px; bottom: -18px; z-index: 2; }

.secao { padding-block: var(--pv-e-96); }
.secao--branca { background: var(--pv-branco); }
.secao--verde { background: var(--pv-verde); color: var(--pv-branco); }
.secao--terracota { background: var(--pv-terracota); color: var(--pv-nude); }
.secao__cab { margin-bottom: var(--pv-e-48); }

.tres { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--pv-e-24); }
.tres .pv-card { display: flex; flex-direction: column; gap: var(--pv-e-12); }
.icone { width: 48px; height: 48px; border-radius: 50%; background: var(--pv-nude); color: var(--pv-verde); display: grid; place-items: center; }
.icone svg { width: 24px; height: 24px; }
.secao--verde .icone { background: color-mix(in oklab, var(--pv-branco) 16%, transparent); color: var(--pv-areia); }
.secao--verde .pv-card { background: transparent; box-shadow: none; border: 1px solid color-mix(in oklab, var(--pv-branco) 25%, transparent); color: var(--pv-branco); }

.inclui { display: grid; grid-template-columns: 1.2fr 0.8fr; gap: var(--pv-e-48); align-items: start; }
.inclui .pv-lista { gap: var(--pv-e-16); }
.oferta { position: sticky; top: 88px; }
.oferta .pv-preco { margin-block: var(--pv-e-16); }
.oferta__lista { display: grid; gap: var(--pv-e-8); font-size: var(--pv-t-rotulo); margin-top: var(--pv-e-16); }

.passos { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--pv-e-32) var(--pv-e-24); counter-reset: passo; }
.passos .pv-passo { grid-template-columns: 1fr; gap: var(--pv-e-12); }

.depos { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--pv-e-24); }

.oferta-final { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: var(--pv-e-48); align-items: center; }
.oferta-final .pv-card { color: var(--pv-terracota); }
.oferta-final .pv-lista li::before { background-color: var(--pv-areia); }
.oferta-final__inclui { display: grid; gap: var(--pv-e-8); font-size: var(--pv-t-rotulo); margin-top: var(--pv-e-16); }
.oferta-final__inclui span { display: flex; justify-content: space-between; gap: var(--pv-e-16); border-bottom: 1px solid color-mix(in oklab, var(--pv-terracota) 14%, transparent); padding-bottom: var(--pv-e-8); }

.fecho { text-align: center; }
.fecho .pv-display { max-width: 20ch; margin-inline: auto; }
.fecho p { max-width: 52ch; margin: var(--pv-e-16) auto 0; }

.barra-fixa { display: none; }

@media (max-width: 900px) {
  .hero__grid, .inclui, .oferta-final { grid-template-columns: 1fr; }
  .hero__capa { order: -1; width: min(280px, 70%); margin-bottom: var(--pv-e-24); }
  .oferta { position: static; }
}
@media (max-width: 640px) {
  .hero { padding-block: var(--pv-e-32) var(--pv-e-48); }
  .secao { padding-block: var(--pv-e-64); }
  .hero__h1 { font-size: 2.125rem; }
  .topo__logo { height: 38px; }
  .topo .pv-btn { padding-inline: var(--pv-e-16); }
  /* barra fixa de compra no celular */
  .barra-fixa { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; align-items: center; justify-content: space-between; gap: var(--pv-e-12);
    padding: var(--pv-e-12) var(--pv-e-16) calc(var(--pv-e-12) + env(safe-area-inset-bottom)); background: var(--pv-branco); border-top: var(--pv-fio); box-shadow: 0 -10px 30px rgba(127,63,42,.10); }
  .barra-fixa__preco { display: flex; flex-direction: column; line-height: 1.1; }
  .barra-fixa__de { font-size: var(--pv-t-micro); text-decoration: line-through; opacity: .6; }
  .barra-fixa__por { font-family: var(--pv-fonte-display); font-size: var(--pv-t-titulo-3); }
  .barra-fixa .pv-btn { min-height: 48px; padding-inline: var(--pv-e-24); }
  body.tem-barra { padding-bottom: 84px; }
}

/* =============================================================
   LP DO E-BOOK, versão curta (28/08/2026)
   A v1 tinha 1051 palavras e 11 seções, tamanho de página de curso. O guia custa
   R$ 29,90: a decisão é barata e a página tem que ser de produto, não carta de venda.
   Guardada em ../_historico/peru-v1-longa.html.
   ============================================================= */

/* ---------- hero com foto (redesign 31/08/2026, gramática do Calendly/Refero
   aplicada em cima do Priorize DS — ver bar.md da rodada) ---------- */
.hero--peru { padding-block: var(--pv-e-96) var(--pv-e-96); }
.hero--peru .hero__grid { grid-template-columns: 1.35fr 1fr; gap: var(--pv-e-64); align-items: center; }
.hero--peru .hero__texto { max-width: 46ch; min-width: 0; }
.hero--peru .hero__grid, .hero--peru .hero__grid > * { min-width: 0; }

.hero--peru .hero__midia { position: relative; }
/* painel sólido deslocado atrás do cartão: dá a cor de marca de verdade,
   em vez de depender só de sombra difusa (que desatura perto do fundo nude e lê cinza) */
.hero--peru .hero__midia::before {
  content: ""; position: absolute; z-index: 0; inset: 7% -7% -7% 9%;
  background: var(--pv-areia-clara); border-radius: var(--pv-raio-l); transform: rotate(3deg);
}
.hero--peru .hero__midia-moldura {
  position: relative; z-index: 1; margin: 0; overflow: hidden;
  border-radius: var(--pv-raio-l);
  box-shadow:
    0 4px 6px rgba(127, 63, 42, .60),
    0 16px 26px rgba(127, 63, 42, .32),
    0 42px 64px rgba(127, 63, 42, .18);
  transform: rotate(-1.5deg);
  background: var(--pv-branco);
}
.hero--peru .hero__midia-moldura img { width: 100%; height: auto; display: block; aspect-ratio: 4 / 5; object-fit: cover; }
.hero--peru .hero__grafismo {
  position: absolute; z-index: 0; width: 44%; opacity: .28;
  right: -3%; bottom: -6%; transform: rotate(8deg); pointer-events: none;
}
/* selo de credibilidade: em terracota (cor primária), não areia — o acento pêssego
   já está no ponto do rótulo e na palavra script, não sobra orçamento pra um terceiro uso */
.hero--peru .hero__selo { position: absolute; z-index: 2; top: -14px; left: -14px; }
.hero--peru .hero__selo .pv-selo { font-size: var(--pv-t-rotulo); padding: .5em .9em; box-shadow: var(--pv-sombra); background: var(--pv-terracota); color: var(--pv-nude); }

.hero--peru .hero__provas { display: flex; flex-wrap: wrap; gap: var(--pv-e-8); margin-top: var(--pv-e-16); }

.hero__oferta { display: flex; align-items: center; gap: var(--pv-e-24); flex-wrap: wrap; margin-top: var(--pv-e-32); }
.pv-preco--linha { flex-direction: column; gap: 0; }
.pv-preco--linha .pv-preco__num { font-size: var(--pv-t-titulo-1); }

/* ---------- mosaico de destinos ----------
   Duas fotos grandes em cima, três cartões de marca embaixo. O cartão sem foto usa um
   grafismo do próprio logo, então lê como peça da marca em vez de buraco de imagem, e
   vira cartão de foto sem mexer no layout quando a foto chegar. */
.destinos { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--pv-e-16); }
.destino { position: relative; margin: 0; border-radius: var(--pv-raio); overflow: hidden; }
.destino--foto { grid-column: span 3; }
.destino--foto img { width: 100%; height: 100%; aspect-ratio: 4 / 5; object-fit: cover; display: block; }
.destino--foto figcaption {
  position: absolute; inset: auto 0 0; padding: var(--pv-e-24) var(--pv-e-16) var(--pv-e-16);
  background: linear-gradient(0deg, rgba(45,20,12,.82) 0%, rgba(45,20,12,.34) 55%, rgba(45,20,12,0) 100%);
  color: var(--pv-branco); font-family: var(--pv-fonte-display); font-size: var(--pv-t-titulo-2); line-height: 1;
}
.destino--marca {
  grid-column: span 1; aspect-ratio: 1; display: grid; place-items: center; text-align: center;
  padding: var(--pv-e-12);
}
.destino--marca p { position: relative; z-index: 1; margin: 0; font-family: var(--pv-fonte-display); font-size: var(--pv-t-titulo-3); line-height: 1; }
.destino__grafismo { position: absolute; inset: auto -12% -14% auto; width: 74%; opacity: .17; }
.destino--terracota { background: var(--pv-terracota); color: var(--pv-nude); }
.destino--verde { background: var(--pv-verde); color: var(--pv-branco); }
.destino--areia { background: var(--pv-areia); color: var(--pv-terracota); }

/* ---------- o que tem dentro ---------- */
.dentro { display: grid; gap: var(--pv-e-32); align-items: center; }
.dentro__lista { margin-top: var(--pv-e-32); }
.dentro__foto { margin: 0; }
.dentro__foto img { width: 100%; height: auto; border-radius: var(--pv-raio); display: block; }

/* ---------- bônus e oferta ---------- */
/* o bônus é faixa, não seção: com um título e uma linha, o padding de seção inteira
   (96px) deixava meia tela de verde vazio. */
.secao--bonus { padding-block: var(--pv-e-48); }
.bonus .pv-lead { margin-top: var(--pv-e-16); max-width: 46ch; }
.bonus .pv-titulo-secao { max-width: 26ch; }
.oferta-bloco { display: grid; gap: var(--pv-e-32); align-items: center; }
/* o `.oferta` do layout antigo era `position: sticky; top: 88px`, pra acompanhar uma lista
   longa. Nesta seção curta o card grudava e VAZAVA pra fora da faixa terracota, por cima
   e por baixo. Aqui ele é um card comum. */
.oferta-bloco .oferta { position: static; top: auto; }
.oferta-bloco .pv-lead { margin-top: var(--pv-e-16); }
.oferta__lista { margin-top: var(--pv-e-24); }
.oferta__micro { margin-top: var(--pv-e-12); font-size: var(--pv-t-micro); opacity: .7; }
.oferta-bloco .pv-card { color: var(--pv-terracota); }

/* ---------- perguntas ----------
   <dl> em vez de acordeão: com resposta de uma linha, o clique pra abrir só adiciona
   trabalho pra ler oito palavras. */
.faq { margin: 0; display: grid; gap: var(--pv-e-24); }
.faq dt { font-family: var(--pv-fonte-display); font-size: var(--pv-t-titulo-3); line-height: 1.1; }
.faq dd { margin: var(--pv-e-8) 0 0; max-width: 60ch; }

.fecho .pv-btn { margin-top: var(--pv-e-32); }

@media (min-width: 760px) {
  .destinos { grid-template-columns: repeat(6, 1fr); }
  .destino--foto { grid-column: span 3; }
  .destino--foto.destino--alto img { aspect-ratio: 4 / 5; }
  .destino--marca { grid-column: span 2; aspect-ratio: 16 / 9; }
  .dentro { grid-template-columns: 1.05fr .95fr; gap: var(--pv-e-64); }
  .oferta-bloco { grid-template-columns: 1.05fr .95fr; gap: var(--pv-e-64); }
}
@media (max-width: 900px) {
  /* o hero vira foto compacta em cima, texto embaixo */
  .hero--peru .hero__grid { grid-template-columns: 1fr; }
  .hero--peru .hero__midia { order: -1; margin-bottom: var(--pv-e-24); width: min(320px, 78%); margin-inline: auto; }
}
@media (max-width: 640px) {
  /* aperto extra: preço e CTA precisam caber sem rolar numa tela comum de celular
     (~650-800px úteis) — a foto vira selo pequeno no canto, não protagonista */
  .hero--peru { padding-block: var(--pv-e-16) var(--pv-e-16); }
  .hero--peru .hero__grid { gap: var(--pv-e-8); }
  .hero--peru .hero__midia { width: min(116px, 32%); margin-bottom: 0; margin-inline: 0; }
  .hero--peru .hero__h1 { margin-top: var(--pv-e-8); }
  .hero--peru .hero__sub { margin-top: var(--pv-e-8); font-size: var(--pv-t-corpo); }
  .hero--peru .hero__provas { margin-top: var(--pv-e-8); gap: var(--pv-e-8); }
  .hero--peru .hero__provas .pv-chip:nth-child(3) { display: none; }
  .hero--peru .hero__oferta { margin-top: var(--pv-e-8); }
  .hero--peru .hero__micro { margin-top: var(--pv-e-8); }
  .hero--peru .hero__selo .pv-selo { font-size: 0.58rem; padding: .3em .55em; white-space: nowrap; }
  .hero--peru .hero__selo { top: -8px; left: -8px; }
}