/* ============================================================
   BOTÕES — um sistema só pras 3 páginas (carregado depois do <style> de cada uma).
   Ideia (Apple HIG): formato cápsula, 3 pesos de destaque
     1. cheio   (.btn--red, .buy, .dock__btn)  → a ação principal da tela
     2. tingido (.btn--outline)                → alternativa forte, sem competir
     3. vidro   (.btn--ghost, .change, .qbtn)  → ações secundárias
   + neutro claro (.btn--white) pra mentoria, que é outro "produto".
   Toque: escurece e encolhe NA HORA em que o dedo encosta; solta devagar, sem quique.
   ============================================================ */
:root{
  --b-red:#FF2800; --b-red-hi:#FF4A24; --b-red-lo:#E62400;
  --b-ease:cubic-bezier(.2,.8,.2,1);
}

/* ---- base comum ---- */
.btn, .buy, .dock__btn, .change, .qbtn{
  -webkit-appearance:none; appearance:none;
  position:relative; isolation:isolate;
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  border:none; border-radius:999px; text-decoration:none; cursor:pointer;
  font-family:'Archivo',system-ui,sans-serif; font-weight:700; letter-spacing:-.01em; line-height:1.1;
  -webkit-tap-highlight-color:transparent; touch-action:manipulation; user-select:none; -webkit-user-select:none;
  transition:transform .4s var(--b-ease), filter .25s ease, background-color .25s ease, box-shadow .25s ease, color .2s ease;
}
/* resposta instantânea no toque: encolhe e escurece em 80ms */
.btn:active, .buy:active, .dock__btn:active, .change:active, .qbtn:active{
  transform:scale(.97); filter:brightness(.9); transition-duration:.08s;
}
.btn:focus-visible, .buy:focus-visible, .dock__btn:focus-visible, .change:focus-visible, .qbtn:focus-visible, .ucard:focus-visible{
  outline:3px solid rgba(255,40,0,.55); outline-offset:3px;
}

/* seta: mesma fonte do texto, mais leve, anda um pouco no hover */
.btn .a, .buy .a, .dock__btn .a{
  font-family:inherit; font-weight:500; font-size:1em; opacity:.72; color:inherit !important;
  transition:transform .35s var(--b-ease);
}
@media (hover:hover){
  .btn:hover .a, .buy:hover .a, .dock__btn:hover .a{ transform:translateX(3px); }
}

/* ---- tamanhos ---- */
.btn{ width:100%; min-height:56px; padding:0 24px; font-size:1.0625rem; }
.buy{ min-height:58px; padding:0 40px; font-size:1.0625rem; }
.dock__btn{ min-height:48px; padding:0 22px; font-size:1rem; }

/* ---- 1. cheio (principal) ---- */
.btn--red, .buy, .dock__btn{
  background:linear-gradient(180deg, var(--b-red-hi) 0%, var(--b-red) 55%, var(--b-red-lo) 100%);
  color:#fff;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.28),      /* luz pegando na borda de cima */
    inset 0 -1px 0 rgba(0,0,0,.18),
    0 1px 2px rgba(0,0,0,.35),
    0 10px 28px -8px rgba(255,40,0,.6);       /* sombra colorida curta, sem neon */
}
@media (hover:hover){
  .btn--red:hover, .buy:hover, .dock__btn:hover{ filter:brightness(1.06); }
}

/* ---- 2. tingido (alternativa) ---- */
.btn--outline{
  background:rgba(255,40,0,.16); color:#FF7A5C;
  box-shadow:inset 0 0 0 1px rgba(255,40,0,.32);
}
@media (hover:hover){ .btn--outline:hover{ background:rgba(255,40,0,.22); } }

/* ---- 3. vidro (secundário) ---- */
.btn--ghost, .change, .qbtn{
  background:rgba(255,255,255,.07); color:var(--ink,#F5F5F6);
  -webkit-backdrop-filter:blur(16px) saturate(160%); backdrop-filter:blur(16px) saturate(160%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10), inset 0 0 0 1px rgba(255,255,255,.10);
}
@media (hover:hover){ .btn--ghost:hover, .change:hover, .qbtn:hover{ background:rgba(255,255,255,.11); } }
.change{ display:none; min-height:36px; padding:0 15px; font-size:.84rem; font-weight:600; color:var(--dim,#A4A4AA); }
.change:active{ color:var(--ink,#F5F5F6); border-color:transparent; }
body.answered .change{ display:inline-flex; }

/* ---- neutro claro (mentoria) ---- */
.btn--white, .mentor .btn--white{
  background:linear-gradient(180deg,#FFFFFF 0%,#ECECEF 100%); color:#1D1D1F;
  box-shadow:inset 0 1px 0 #fff, 0 1px 2px rgba(0,0,0,.4), 0 10px 26px -10px rgba(0,0,0,.7);
}
.btn--white .a, .mentor .btn--white .a{ color:#1D1D1F !important; }

/* ---- linhas de opção (cursos avulsos): retângulo de canto contínuo, não cápsula ---- */
.ucard, .card{
  border-radius:18px !important;
  background:rgba(255,255,255,.045) !important;
  border:none !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07), inset 0 0 0 1px rgba(255,255,255,.12) !important;
  transition:transform .4s var(--b-ease), background-color .25s ease, filter .25s ease !important;
  -webkit-tap-highlight-color:transparent;
}
.ucard:active, .card:active{ transform:scale(.98) !important; background:rgba(255,255,255,.08) !important; transition-duration:.08s !important; }
@media (hover:hover){ .ucard:hover, .card:hover{ background:rgba(255,255,255,.07) !important; } }
.ucard .arw, .card__arw{ transition:transform .35s var(--b-ease); }
@media (hover:hover){ .ucard:hover .arw, .card:hover .card__arw{ transform:translateX(3px); } }

/* ---- links de texto ("ir direto pro pagamento", "chamada de 1h"): alvo de toque maior ---- */
.linkrow, .mentor__alt{ padding:12px 0 !important; margin-top:4px !important; transition:color .2s ease, opacity .2s ease; }
.linkrow:active, .mentor__alt:active, .mini:active{ opacity:.6; }

/* ---- botão da tela de entrada: mesmo formato cápsula ---- */
.cta{ border-radius:999px !important; }
.cta__in{ border-radius:999px !important; padding:0 26px 0 32px !important; min-height:60px; font-weight:800 !important; letter-spacing:.03em !important; }
.cta::before{ border-radius:999px !important; }
.cta:active{ transform:scale(.97); transition-duration:.08s; }
.cta:active .cta__in{ filter:brightness(.9); }
.qbtn{ gap:8px; font-family:'Space Mono',monospace; font-weight:400; letter-spacing:0; color:var(--dim,#A4A4AA); }

/* ---- acessibilidade ---- */
@media (prefers-reduced-motion: reduce){
  .btn, .buy, .dock__btn, .change, .qbtn, .ucard, .card, .cta{ transition:filter .15s ease, background-color .15s ease !important; }
  .btn:active, .buy:active, .dock__btn:active, .change:active, .qbtn:active, .ucard:active, .card:active, .cta:active{ transform:none !important; }
  .btn .a, .buy .a, .dock__btn .a{ transition:none; transform:none !important; }
}
@media (prefers-reduced-transparency: reduce){
  .btn--ghost, .change, .qbtn{ background:#2A2A30; -webkit-backdrop-filter:none; backdrop-filter:none; }
}
@media (prefers-contrast: more){
  .btn--ghost, .change, .qbtn, .ucard, .card{ box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.55) !important; }
  .btn--outline{ box-shadow:inset 0 0 0 1.5px var(--b-red); color:#fff; }
}