/* Tokens de marca (paleta + tipografia + escala) — fonte unica. */
@import url('aptk-tokens.css');

/* =====================================================================
   APTK — IDENTIDADE VISUAL  ·  public/css/aptk.css
   ---------------------------------------------------------------------
   Carregar SEMPRE depois do Bootstrap 5 (esta folha tematiza por cima).
   Ordem no <head>:  Bootstrap 5  →  aptk.css  →  CSS específico da página
   Regra de ouro: nenhuma cor hardcoded fora do :root — tudo via var().
   ===================================================================== */

/* ---------------------------------------------------------------------
   1. TOKENS (:root)
   --------------------------------------------------------------------- */

/* ---------------------------------------------------------------------
   2. BASE — overrides do tema escuro sobre o Reboot do Bootstrap
   --------------------------------------------------------------------- */
body {
  background-color: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--text-base);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.12;
  color: var(--color-text);
}

a { color: inherit; text-decoration: none; }

ul.list-clean { margin: 0; padding: 0; list-style: none; }

:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

::selection { background: var(--color-primary); color: var(--color-text-inverse); }

/* ---------------------------------------------------------------------
   3. COMPONENTES
   --------------------------------------------------------------------- */

/* Container customizado (não conflita com .container do Bootstrap) */
.container-aptk {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: 24px;
}

/* Espaçamento vertical de seção */
.section { padding-block: clamp(64px, 9vw, 120px); }
.section-head { max-width: 640px; margin-bottom: 48px; }
.section-head p { color: var(--color-text-muted); font-size: var(--text-lg); margin: 0; }

/* Eyebrow / rótulo de seção (mono, caixa alta, espaçado) */
.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-primary);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.eyebrow::before {
  content: "";
  width: 26px;
  height: 1px;
  background: var(--color-primary);
  display: inline-block;
}

/* Título de seção com fio dourado embaixo */
.section-title {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 4vw, var(--text-4xl));
  color: var(--color-text);
  margin-top: 14px;
  padding-bottom: 16px;
  position: relative;
}
.section-title::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 64px;
  height: 2px;
  background: var(--color-primary);
}

/* Botão APTK — sólido dourado, texto escuro caixa alta */
.btn-aptk {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 28px;
  background: var(--color-primary);
  color: var(--color-text-inverse);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--text-sm);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border: 1px solid var(--color-primary);
  border-radius: var(--radius-md);
  transition: background-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.btn-aptk:hover {
  background: var(--color-primary-hover);
  border-color: var(--color-primary-hover);
  box-shadow: var(--shadow-glow);
  transform: translateY(-1px);
  color: var(--color-text-inverse);
}

/* Variante contorno */
.btn-aptk--outline {
  background: transparent;
  color: var(--color-primary);
  border-color: var(--color-primary-muted);
}
.btn-aptk--outline:hover {
  background: var(--gold-faint);
  color: var(--color-primary-hover);
  border-color: var(--color-primary);
  box-shadow: none;
}

.btn-aptk--block { width: 100%; }

/* Card base */
.card-aptk {
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease;
}
.card-aptk:hover {
  border-color: var(--color-primary-muted);
  box-shadow: var(--shadow-card);
}

/* Badge */
.badge-aptk {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-primary-muted);
  color: var(--color-primary);
  background: var(--gold-faint);
}

/* Preço — fonte mono */
.price-tag {
  font-family: var(--font-mono);
  font-weight: 500;
  color: var(--color-text);
}
.price-tag small { color: var(--color-text-muted); font-weight: 400; }

/* Nome de produto em cursivo âmbar (assinatura da marca) */
.product-name {
  font-family: var(--font-script);
  font-weight: 700;
  color: var(--color-primary);
  line-height: 1.1;
}

/* Placeholder de imagem (#1F1F1F) — usado durante o dev, antes das imagens reais */
.placeholder {
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  display: grid;
  place-items: center;
  color: var(--color-text-muted);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  position: relative;
  overflow: hidden;
}
.placeholder::after {
  content: "APTK";
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  color: var(--color-border);
  position: absolute;
  letter-spacing: 0.1em;
}
.placeholder span { position: relative; z-index: 1; align-self: end; margin-bottom: 14px; }

/* ---------------------------------------------------------------------
   3b. LEVA 10 — componentes editoriais reaproveitados entre páginas
   --------------------------------------------------------------------- */

/* Título editorial (serif Neue World) — só heroes e títulos das seções
   editoriais. Nav, botões, eyebrows e cards seguem em PP Rader. */
.title-editorial {
  font-family: var(--font-editorial);
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 1.08;
}
.section-title.title-editorial { font-size: clamp(1.9rem, 4.2vw, 2.6rem); }

/* Seta discreta dentro do botão: <a class="btn-aptk">Texto <span class="btn-arrow">→</span></a> */
.btn-arrow { display: inline-block; font-family: var(--font-body); transition: transform .2s ease; }
.btn-aptk:hover .btn-arrow,
.link-arrow:hover .btn-arrow { transform: translateX(3px); }

/* Link de card: caixa alta pequena âmbar, com seta */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-primary);
}
.link-arrow:hover { color: var(--color-primary-hover); }

/* Passos numerados "01 — Título / texto" (Quem Somos, Custom, Clube, Eventos) */
.num-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  gap: clamp(24px, 3vw, 40px);
  margin: 0;
  padding: 0;
  list-style: none;
}
.num-steps > li { border-top: 1px solid var(--gold-line); padding-top: 18px; }
.num-steps .ns-num {
  display: block;
  font-family: var(--font-editorial);
  font-size: var(--text-4xl);
  line-height: 1;
  color: var(--color-primary);
  margin-bottom: 14px;
}
.num-steps h3 { font-size: var(--text-lg); margin: 0 0 8px; }
.num-steps .ns-sub { font-family: var(--font-editorial); color: var(--color-text); margin: 0 0 8px; }
.num-steps p { color: var(--color-text-muted); font-size: var(--text-sm); line-height: 1.7; margin: 0; }
/* Variante vertical (lista em coluna, ex. ao lado de um formulário) */
.num-steps--stack { grid-template-columns: 1fr; gap: 22px; }
.num-steps--stack .ns-num { font-size: var(--text-2xl); margin-bottom: 8px; }

/* Card com mídia (foto ou <x-photo-slot>) + eyebrow, título, texto e link */
.media-card {
  display: flex;
  flex-direction: column;
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  color: inherit;
  transition: border-color .25s ease, box-shadow .25s ease;
}
a.media-card:hover { border-color: var(--color-primary-muted); box-shadow: var(--shadow-card); color: inherit; }
.media-card .mc-media { position: relative; aspect-ratio: var(--mc-ratio, 4 / 3); background: var(--color-ink); overflow: hidden; }
.media-card .mc-media > img,
.media-card .mc-media > video { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s ease; }
a.media-card:hover .mc-media > img { transform: scale(1.03); }
.media-card .mc-media > .photo-slot { height: 100%; aspect-ratio: auto; border: 0; border-radius: 0; }
.media-card .mc-body { display: flex; flex-direction: column; gap: 8px; padding: 20px 22px 22px; flex: 1; }
.media-card .mc-eyebrow { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: 0.16em; text-transform: uppercase; color: var(--color-primary); }
.media-card h3 { font-size: var(--text-xl); margin: 0; }
.media-card h3.title-editorial { font-size: var(--text-2xl); }
.media-card p { color: var(--color-text-muted); font-size: var(--text-sm); line-height: 1.65; margin: 0; }
.media-card .link-arrow { margin-top: auto; padding-top: 6px; }

/* Bloco reservado para foto que ainda não chegou (<x-photo-slot>) */
.photo-slot {
  display: grid;
  place-items: center;
  width: 100%;
  aspect-ratio: var(--ps-ratio, 4 / 3);
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}
.photo-slot .ps-symbol { width: 56px; max-width: 30%; height: auto; color: var(--color-copper); opacity: .35; }

/* ---------------------------------------------------------------------
   4. UTILITÁRIOS
   --------------------------------------------------------------------- */
.text-gold   { color: var(--color-primary); }
.bg-elevated { background: var(--color-bg-elevated); }
.border-gold { border: 1px solid var(--color-primary-muted); }

/* ---------------------------------------------------------------------
   5. ACESSIBILIDADE — movimento reduzido
   --------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}