body { margin: 0; background: #FAFAF7; font-family: "Plus Jakarta Sans", system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
a { color: #D45200; text-decoration: none; }
a:hover { color: #F08A2E; }
a[style*="linear-gradient"] { color: #1B0F08; transition: filter .15s ease; }
a[style*="linear-gradient"]:hover { color: #1B0F08; filter: brightness(1.06); }
img { max-width: 100%; }

/* ---------- Barra de CTA fixa (só mobile, aparece após o hero) ---------- */
#mobile-cta { display: none; }

/* ---------- Faixa intermediária: tablets e notebooks pequenos ---------- */
@media (max-width: 1100px) {
  section, footer { padding: 72px 28px !important; }
  [style*="1fr 1fr"] { grid-template-columns: 1fr !important; gap: 32px !important; }
  [style*="repeat(3, 1fr)"] { grid-template-columns: repeat(2, 1fr) !important; }
  h1 { font-size: 44px !important; line-height: 1.1 !important; }
  h2 { font-size: 31px !important; line-height: 1.2 !important; }
  section:first-of-type img { max-width: 440px !important; margin: 0 auto !important; }
}

@media (max-width: 820px) {
  /* Estrutura: tudo em coluna única */
  section, footer { padding: 56px 20px !important; }
  section > div, footer > div { max-width: 100% !important; }
  [style*="repeat(3, 1fr)"],
  [style*="repeat(2, 1fr)"],
  [style*="1fr 1fr"] { grid-template-columns: 1fr !important; gap: 14px !important; }

  /* Tipografia: promessa continua dominante */
  h1 { font-size: 34px !important; line-height: 1.12 !important; }
  h2 { font-size: 26px !important; line-height: 1.22 !important; }
  h3 { font-size: 17px !important; }
  p, span, div { text-wrap: pretty; }

  /* Números e preço */
  [style*="font-size: 58px"] { font-size: 44px !important; }
  [style*="font-size: 44px"] { font-size: 34px !important; }
  [style*="font-size: 62px"] { font-size: 34px !important; }
  [style*="font-size: 42px"] { font-size: 28px !important; }
  [style*="font-size: 40px"] { font-size: 26px !important; }

  /* Botões: largura total, alvo de toque grande, texto legível */
  a[style*="linear-gradient"] {
    display: flex !important;
    width: 100% !important;
    box-sizing: border-box !important;
    justify-content: center !important;
    text-align: center !important;
    font-size: 15px !important;
    line-height: 1.3 !important;
    padding: 20px 18px !important;
    min-height: 58px !important;
    align-items: center !important;
  }

  /* Hero: imagem sobe menos espaço, chips mais compactos */
  section:first-of-type { padding: 44px 20px 64px !important; }
  section:first-of-type img { max-width: 320px !important; margin: 0 auto !important; }
  [style*="border-radius: 999px"][style*="font-size: 14px"] { font-size: 13px !important; padding: 7px 12px !important; }

  /* Cards e FAQ */
  [style*="padding: 40px 40px 44px"] { padding: 28px 22px 32px !important; }
  [style*="padding: 32px 36px"] { padding: 24px 22px !important; }
  [style*="padding: 32px"] { padding: 24px 20px !important; }
  .faq-head { padding: 18px 20px !important; font-size: 15px !important; }
  .faq-body p { padding: 0 20px 20px !important; font-size: 15px !important; }

  /* Espaço para a barra fixa não cobrir conteúdo */
  body { padding-bottom: 84px; }

  #mobile-cta {
    display: flex;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 999;
    align-items: center;
    gap: 12px;
    padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
    background: rgba(12, 8, 6, 0.96);
    border-top: 1px solid rgba(240, 138, 46, 0.28);
    box-shadow: 0 -8px 26px rgba(0, 0, 0, 0.28);
    transform: translateY(120%);
    transition: transform .28s ease;
  }
  #mobile-cta.is-visible { transform: translateY(0); }
  #mobile-cta .mc-price { flex: 0 0 auto; line-height: 1.15; }
  #mobile-cta .mc-old { display: block; font-size: 11px; color: rgba(255,255,255,0.55); text-decoration: line-through; }
  #mobile-cta .mc-now { display: block; font-size: 19px; font-weight: 800; color: #F7A552; letter-spacing: -0.02em; }
  #mobile-cta .mc-btn {
    flex: 1 1 auto;
    display: flex; align-items: center; justify-content: center;
    min-height: 52px; padding: 14px 16px;
    border-radius: 999px;
    background: linear-gradient(100deg, #C94B00 0%, #E4650B 45%, #F7A552 100%);
    color: #1B0F08 !important;
    font-size: 14px; font-weight: 800; letter-spacing: 0.01em;
    text-align: center;
  }
}

/* Bloco de demonstração: gif e imagem do resultado */
@media (max-width: 820px) {
  /* o card do comando deixa de ter largura fixa */
  [style*="width: 525px"] { width: 100% !important; }
  /* a imagem do resultado é larga: permite ler com rolagem lateral dentro do card */
  #demo-result { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: 10px; }
  #demo-result img { width: auto !important; max-width: none !important; height: 62vh; }
  #demo-hint { display: block !important; }
}

/* ---------- Contorno cinza; luz laranja no hover ---------- */
@property --glow-a { syntax: "<angle>"; initial-value: 0deg; inherits: false; }

.glow { position: relative; isolation: isolate; transition: transform .25s ease, box-shadow .25s ease; }
.glow::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1.5px;
  background: rgba(27,15,8,0.14);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  transition: background .2s ease;
  pointer-events: none;
}
.glow:hover::before {
  background: conic-gradient(from var(--glow-a),
    rgba(226,101,12,0.10) 0deg,
    rgba(226,101,12,0.10) 250deg,
    rgba(247,165,82,0.9) 305deg,
    #E2650C 340deg,
    rgba(226,101,12,0.10) 360deg);
  animation: glow-spin 2.6s linear infinite;
}
.glow:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 40px rgba(27,15,8,0.12), 0 0 26px rgba(226,101,12,0.22) !important;
}
@keyframes glow-spin { to { --glow-a: 360deg; } }

@supports not (background: conic-gradient(from var(--glow-a), red, blue)) {
  .glow:hover::before { background: #E2650C; animation: none; }
}
@media (prefers-reduced-motion: reduce) {
  .glow:hover::before { background: #E2650C; animation: none; }
}