/* ==========================================================================
   PEGORETH & ROAS — página do kit Bitcoin do Zero (oferta paga)
   Camada extra, carregada depois de components.css só nas páginas que
   mostram o kit. Não traz cor bruta: tudo sai de tokens.css, por isso o
   tema escuro funciona sem regra própria na maior parte dos blocos.
   ========================================================================== */

/* ---------- Primeira dobra ---------- */
.pr-kit-hero { padding-block: clamp(2rem, 1rem + 4vw, 5rem) var(--sp-section); }
.pr-kit-hero__grid {
  display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
  gap: clamp(2rem, 1rem + 4vw, 5rem); align-items: center;
}
.pr-kit-hero__copy { max-width: 40rem; }
.pr-kit-hero__note { margin-top: var(--sp-6); font-size: var(--t-caption-size); color: var(--c-text-muted); max-width: 48ch; }
.pr-kit-hero__media { justify-self: center; width: 100%; max-width: 320px; }

/* Imagem de página real de um PDF: moldura discreta, sem efeito que a
   faça parecer outra coisa. */
.pr-kit-page {
  display: block; width: 100%; height: auto;
  border: 1px solid var(--c-border-default);
  border-radius: var(--r-sm);
  background: var(--c-surface);
  box-shadow: var(--sh-md);
}

@media (max-width: 900px) {
  .pr-kit-hero__grid { grid-template-columns: minmax(0, 1fr); }
  .pr-kit-hero__media { max-width: 200px; justify-self: start; }
}
/* No telemóvel a capa sai da primeira dobra (ela reaparece na prévia):
   assim a oferta, com preço e botão, chega logo na dobra seguinte. */
@media (max-width: 767px) { .pr-kit-hero__media { display: none; } }

/* ---------- Oferta ---------- */
.pr-kit-offer {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 1rem + 3vw, 4rem); align-items: start;
}
@media (max-width: 900px) { .pr-kit-offer { grid-template-columns: minmax(0, 1fr); } }

.pr-kit-files { display: flex; flex-direction: column; gap: var(--sp-4); padding: 0; list-style: none; }
.pr-kit-file {
  display: flex; gap: var(--sp-4); align-items: flex-start;
  padding: var(--sp-5); border: 1px solid var(--c-border-default);
  border-radius: var(--r-sm); background: var(--c-surface);
}
.pr-kit-file__icon {
  flex: none; width: 40px; height: 40px; display: grid; place-items: center;
  background: var(--c-surface-accent-soft); color: var(--c-text-accent); border-radius: var(--r-sm);
}
.pr-kit-file__icon svg { width: 20px; height: 20px; }
.pr-kit-file__title { font-weight: 600; color: var(--c-text-primary); }
.pr-kit-file__meta { font-family: var(--f-mono); font-size: var(--t-caption-size); color: var(--c-text-muted); margin-top: var(--sp-1); }
.pr-kit-file__desc { font-size: var(--t-body-sm-size); color: var(--c-text-secondary); margin-top: var(--sp-2); }

/* Botão de compra desativado (checkout não configurado): o texto
   "Checkout ainda não configurado" tem de ser lido, por isso não usa o
   cinza de baixo contraste do estado disabled genérico. */
.pr-btn[data-kit-checkout][aria-disabled="true"] {
  background: var(--c-surface-sunken);
  color: var(--c-text-secondary);
  border: 1px dashed var(--c-border-strong);
}

@media (max-width: 767px) {
  .pr-kit-file__desc { display: none; }
}
@media (max-width: 560px) {
  .pr-kit-page-body .pr-card--pad-lg { padding: var(--sp-5); }
  .pr-kit-file { padding: var(--sp-4); gap: var(--sp-3); }
}

.pr-kit-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sp-3); }
.pr-kit-price__amount { font-family: var(--f-serif); font-size: var(--t-h1-size); line-height: 1; color: var(--c-text-primary); }
.pr-kit-price__label { font-size: var(--t-caption-size); color: var(--c-text-muted); }

/* Nota de estado do checkout: texto normal, legível, nunca só cor. */
.pr-kit-status { margin-top: var(--sp-4); font-size: var(--t-body-sm-size); color: var(--c-text-secondary); }
.pr-kit-status[data-estado="inativo"] {
  padding: var(--sp-3) var(--sp-4);
  border-left: 3px solid var(--c-warning);
  background: var(--c-warning-bg);
  color: var(--c-text-primary);
  border-radius: var(--r-sm);
}

/* ---------- Prévia ---------- */
.pr-kit-gallery {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--sp-6); align-items: start;
}
.pr-kit-gallery figure { margin: 0; }
.pr-kit-zoom { display: block; border-radius: var(--r-sm); }
.pr-kit-zoom:hover .pr-kit-page { box-shadow: var(--sh-lg); }
.pr-kit-gallery figcaption { margin-top: var(--sp-3); font-size: var(--t-caption-size); color: var(--c-text-secondary); }
@media (max-width: 1023px) { .pr-kit-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) {
  .pr-kit-gallery { grid-template-columns: minmax(0, 1fr); gap: var(--sp-7); }
  .pr-kit-gallery figure { max-width: 340px; }
}

/* ---------- Partes do e-book ---------- */
.pr-kit-part__num { font-family: var(--f-mono); font-size: var(--t-eyebrow-size); letter-spacing: var(--t-eyebrow-ls); text-transform: uppercase; color: var(--c-text-accent); }

/* ---------- Listas "para quem é / não é" ---------- */
.pr-kit-list { display: flex; flex-direction: column; gap: var(--sp-3); padding: 0; list-style: none; }
.pr-kit-list li { display: flex; gap: var(--sp-3); align-items: flex-start; font-size: var(--t-body-sm-size); color: var(--c-text-secondary); }
.pr-kit-list svg { flex: none; width: 20px; height: 20px; margin-top: 2px; }
.pr-kit-list--sim svg { color: var(--c-success); }
.pr-kit-list--nao svg { color: var(--c-error); }

/* ---------- Explicador inflação / câmbio ---------- */
.pr-kit-explain dt { font-weight: 600; color: var(--c-text-primary); }
.pr-kit-explain dd { margin: var(--sp-1) 0 var(--sp-5); font-size: var(--t-body-sm-size); color: var(--c-text-secondary); }
.pr-kit-explain dd:last-child { margin-bottom: 0; }
.pr-kit-source { font-size: var(--t-caption-size); color: var(--c-text-muted); margin-top: var(--sp-5); }
.pr-kit-source a { color: inherit; }

/* ---------- Riscos ---------- */
.pr-kit-risks { display: flex; flex-direction: column; gap: var(--sp-4); padding: 0; list-style: none; }
.pr-kit-risks li { padding-left: var(--sp-5); border-left: 2px solid var(--c-rule-accent); }

/* ---------- Barra fixa no telemóvel ----------
   Aparece só em telas estreitas, depois da primeira dobra, e some quando
   a oferta ou o CTA final já estão à vista. Leva sempre ao bloco da
   oferta — onde o preço aparece antes de qualquer botão de compra. */
.pr-kit-sticky { display: none; }
@media (max-width: 767px) {
  .pr-kit-sticky {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-sticky);
    display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
    padding: var(--sp-3) var(--layout-gutter);
    padding-bottom: calc(var(--sp-3) + env(safe-area-inset-bottom, 0px));
    background: var(--c-surface-elevated);
    border-top: 1px solid var(--c-border-default);
    box-shadow: var(--sh-lg);
    transform: translateY(0);
    transition: transform var(--mo-base) var(--mo-ease);
  }
  .pr-kit-sticky[data-visivel="false"] { transform: translateY(110%); visibility: hidden; }
  .pr-kit-sticky__txt { min-width: 0; font-size: var(--t-caption-size); color: var(--c-text-secondary); line-height: 1.35; }
  .pr-kit-sticky__txt strong { display: block; font-size: var(--t-body-sm-size); color: var(--c-text-primary); }
  .pr-kit-sticky .pr-btn { flex: none; }
  .pr-kit-page-body .pr-footer { padding-bottom: calc(var(--sp-7) + 88px); }
}
@media (prefers-reduced-motion: reduce) { .pr-kit-sticky { transition: none; } }

/* ---------- Home: bloco do kit ---------- */
.pr-kit-teaser__cover { width: 100%; max-width: 300px; justify-self: center; }
@media (max-width: 900px) { .pr-kit-teaser__cover { max-width: 200px; justify-self: start; } }

/* ---------- Página de transição (rota antiga) ---------- */
.pr-kit-moved { max-width: 44rem; }

/* base.css zera a margem de ul[class]; aqui as utilidades de espaçamento
   voltam a valer nas listas do kit. */
:is(.pr-kit-files, .pr-kit-list, .pr-kit-risks).u-mt-4 { margin-top: var(--sp-4); }
:is(.pr-kit-files, .pr-kit-list, .pr-kit-risks).u-mt-6 { margin-top: var(--sp-6); }
:is(.pr-kit-files, .pr-kit-list, .pr-kit-risks).u-mt-8 { margin-top: var(--sp-8); }