/* Visual "escuro premium" — direção escolhida pelo dono em 15/09/2026,
   entre três opções apresentadas numa prancheta de design.

   Responsivo em três faixas: celular (padrão), tablet (>=700px) e
   PC (>=1024px). O celular é a base; as faixas maiores só acrescentam. */

:root {
  --fundo: #0e0f11;
  --superficie: #17181b;
  --borda: #25272b;
  --tinta: #f2f0eb;
  --cinza: #a6a39c;
  --cinza-fraco: #6f6c66;
  --limao: #c8f25a;
  --limao-escuro: #b3dd45;
  --largura: 1080px;
}

* { box-sizing: border-box; }
/* O atributo `hidden` tem que esconder de verdade: `.carrossel` e `.abas-lojas` usam
   display:flex, que vence o display:none do navegador. Sem isto a seção da Amazon aparecia
   vazia (só o título) nos dias sem lista válida (achado em 22/10/2026). */
[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--fundo);
  color: var(--tinta);
  font-family: 'IBM Plex Sans', system-ui, -apple-system, "Segoe UI", sans-serif;
  line-height: 1.5;
}

img { max-width: 100%; }

h2 {
  margin: 0;
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-weight: 700;
  font-size: clamp(24px, 3vw, 32px);
  letter-spacing: -0.6px;
}

a { color: var(--limao); }
a:hover { color: #e4ff9a; }

/* ---- topo ---- */

.hero {
  max-width: var(--largura);
  margin: 0 auto;
  padding: 26px 22px 40px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.marca { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.marca-nome {
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-weight: 700;
  font-size: 17px;
  letter-spacing: 0.4px;
}

.selo-diario {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--cinza);
  border: 1px solid var(--borda);
  padding: 5px 10px;
  border-radius: 999px;
  white-space: nowrap;
}
.selo-diario::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--limao);
  flex: 0 0 7px;
}

.hero-texto { display: flex; flex-direction: column; gap: 20px; }

.btn-telegram {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 60px;
  padding: 0 8px 0 22px;
  background: var(--limao);
  color: #0e0f11;
  text-decoration: none;
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-weight: 700;
  font-size: 18px;
  border-radius: 14px;
}
.btn-telegram:hover { background: var(--limao-escuro); color: #0e0f11; }
.btn-telegram:focus-visible { outline: 3px solid var(--limao); outline-offset: 3px; }
.btn-telegram-simples { justify-content: center; padding: 0 22px; font-size: 17px; min-height: 56px; }

/* Botões de entrada no estilo de cada app (pedido do dono, 15/10/2026: "duas caixinhas",
   azul do Telegram com o aviãozinho e verde do WhatsApp com o logo). No celular um embaixo
   do outro; do tablet pra cima, lado a lado. */
.botoes-entrada { display: flex; flex-direction: column; gap: 12px; }
@media (min-width: 668px) { .botoes-entrada { flex-direction: row; } .botoes-entrada > a { flex: 1; } }
.btn-app {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 64px;
  padding: 10px 22px 10px 14px;
  border-radius: 18px;
  color: #fff;
  text-decoration: none;
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-weight: 700;
  font-size: 18px;
  line-height: 1.2;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.28), inset 0 -3px 0 rgba(0, 0, 0, 0.18), 0 6px 18px rgba(0, 0, 0, 0.35);
  transition: transform .12s ease, filter .12s ease;
}
.btn-app:hover { filter: brightness(1.06); transform: translateY(-1px); color: #fff; }
.btn-app:active { transform: translateY(1px); }
.btn-app:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.btn-app-icone {
  flex: 0 0 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.18);
}
.btn-app-whatsapp { background: linear-gradient(180deg, #34e070 0%, #1fb855 100%); }
.btn-app-telegram { background: linear-gradient(180deg, #37aee2 0%, #1e8fd0 100%); }

.btn-seta {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: #0e0f11;
  color: var(--limao);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 44px;
}

.numeros { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.numero {
  border: 1px solid var(--borda);
  border-radius: 12px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  background: rgba(23, 24, 27, 0.6);
}
.numero strong {
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-weight: 700;
  font-size: 18px;
  line-height: 1.1;
}
.numero span { font-size: 12px; color: #85827b; line-height: 1.3; }

/* ---- carrossel de ofertas ---- */

.carrossel {
  max-width: var(--largura);
  margin: 0 auto;
  padding: 12px 0 36px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.carrossel-topo { padding: 0 22px; display: flex; flex-direction: column; gap: 4px; }
.etiqueta { font-size: 12px; letter-spacing: 1.5px; color: var(--limao); font-weight: 600; }

.carrossel-trilho {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  padding: 4px 22px 12px;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}

.card-oferta {
  position: relative;
  flex: 0 0 170px;
  scroll-snap-align: start;
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: 16px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.card-img {
  width: 100%;
  height: 150px;
  object-fit: contain;
  display: block;
  background: #ffffff;
}
.card-selo {
  position: absolute;
  top: 8px;
  left: 8px;
  background: #0e0f11;
  color: var(--limao);
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-weight: 700;
  font-size: 13px;
  padding: 4px 8px;
  border-radius: 8px;
}
.card-titulo {
  font-size: 13px;
  line-height: 1.35;
  color: #e2dfd9;
  margin: 12px 12px 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.card-precos {
  margin: 8px 12px 12px;
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}
.preco-de { order: 2; font-size: 12px; color: var(--cinza); text-decoration: line-through; }
.preco-por {
  order: 1;
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-weight: 700;
  font-size: 19px;
  color: var(--limao);
}
/* Card clicável: quando a oferta já saiu no canal, um link cobre o card
   inteiro e leva ao post. O texto "Ver no canal" fica visível como dica. */
.card-cta {
  margin: 0 12px 12px;
  font-size: 12px;
  font-weight: 600;
  color: var(--limao);
}
.card-post-link {
  position: absolute;
  inset: 0;
  border-radius: 16px;
}
.card-oferta:has(.card-post-link):hover { border-color: var(--limao); }
.card-post-link:focus-visible { outline: 3px solid var(--limao); outline-offset: 2px; }

.carrossel-nota { margin: 0 22px; font-size: 13px; color: var(--cinza); }

/* ---- como funciona ---- */

.passos {
  max-width: var(--largura);
  margin: 0 auto;
  padding: 32px 22px;
  border-top: 1px solid #1f2124;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.passos ol { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.passos li {
  display: flex;
  gap: 14px;
  align-items: center;
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: 14px;
  padding: 16px;
  font-size: 15px;
  color: #e2dfd9;
}
.passo-num {
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-weight: 700;
  font-size: 22px;
  color: var(--limao);
  flex: 0 0 30px;
}
.passos .botoes-entrada { align-self: center; width: 100%; max-width: 640px; }

/* ---- formulário de WhatsApp ---- */

.lead {
  max-width: 640px;
  margin: 0 14px;
  padding: 26px 18px;
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
/* Entre 668 e 699 px o formulário (máx. 640) ficava encostado à esquerda: centraliza antes do tablet. */
@media (min-width: 668px) { .lead { margin-inline: auto; } }
.lead h2 { font-size: clamp(20px, 2.4vw, 26px); }
.lead p { margin: 0; font-size: 14px; line-height: 1.5; color: var(--cinza); }
.lead-form { display: flex; flex-direction: column; gap: 10px; }
.lead-rotulo { font-size: 12px; color: var(--cinza); }
.lead-form input[type="tel"] {
  min-height: 52px;
  width: 100%;
  border: 1px solid #34363b;
  border-radius: 12px;
  background: var(--fundo);
  color: var(--tinta);
  padding: 0 14px;
  font-size: 16px;
  font-family: inherit;
}
.lead-form input[type="tel"]::placeholder { color: var(--cinza-fraco); }
.lead-form input[type="tel"]:focus-visible { outline: 2px solid var(--limao); outline-offset: 1px; }
.lead-form button {
  min-height: 52px;
  border-radius: 12px;
  border: 1px solid var(--limao);
  background: transparent;
  color: var(--limao);
  font-family: inherit;
  font-weight: 600;
  font-size: 16px;
  cursor: pointer;
  white-space: nowrap;
}
.lead-form button:hover { background: rgba(200, 242, 90, 0.1); }
.lead-form button:disabled { opacity: .5; cursor: default; }
.lead-form button:focus-visible { outline: 3px solid var(--limao); outline-offset: 2px; }
.lead-isca { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.lead-msg { margin: 0; font-size: 14px; font-weight: 600; color: var(--limao); }

/* ---- rodapé ---- */

.rodape {
  max-width: 720px;
  margin: 0 auto;
  padding: 28px 22px 32px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 12px;
  line-height: 1.55;
  color: var(--cinza-fraco);
}
.rodape p { margin: 0; }
.rodape a { color: var(--cinza); }
.rodape a:hover { color: var(--limao); }

/* ================= TABLET (>=700px) ================= */

@media (min-width: 700px) {
  .hero { padding: 34px 32px 48px; gap: 26px; }
  .hero h1 { font-size: clamp(42px, 5.4vw, 60px); }
  .hero p { font-size: 18px; max-width: 620px; }
  .btn-telegram { align-self: flex-start; min-width: 340px; }
  .numeros { max-width: 620px; gap: 14px; }
  .numero { padding: 16px; }
  .numero strong { font-size: 22px; }

  .carrossel-topo, .carrossel-nota { padding-inline: 32px; margin-inline: 0; }
  /* No tablet/PC o carrossel vira grade: dá pra ver tudo sem arrastar. */
  .carrossel-trilho {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 16px;
    overflow: visible;
    padding: 4px 32px 12px;
  }
  .card-oferta { flex: initial; }
  .card-img { height: 180px; }
  .card-titulo { font-size: 14px; }
  .preco-por { font-size: 21px; }

  .passos { padding: 44px 32px; gap: 24px; }
  .passos ol { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
  .passos li { flex-direction: column; align-items: flex-start; gap: 10px; min-height: 140px; }

  .lead { margin: 0 auto; padding: 32px; }
  .lead-form { display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: center; }
  .lead-rotulo { grid-column: 1 / -1; }
  .lead-form button { padding: 0 26px; }

  .rodape { padding: 36px 32px 44px; font-size: 13px; }
}

/* ================= PC (>=1024px) ================= */

@media (min-width: 1024px) {
  /* Os 3 cartões viviam numa coluna ao lado do texto (grid "texto numeros"),
     empilhados e ESTREITOS — no PC isso ficava alto, apertado e feio (relato
     do dono, 16/09, com print). Agora "marca" e "texto" ficam empilhados à
     esquerda, e os 3 cartões formam uma faixa horizontal por baixo, cada um
     com o respiro que tinha no celular — sem espremer em coluna nenhuma. */
  .hero {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-areas:
      "marca"
      "texto"
      "numeros";
    row-gap: 32px;
    padding: 40px 40px 56px;
  }
  .marca { grid-area: marca; }
  .hero-texto { grid-area: texto; max-width: 760px; }
  .numeros {
    grid-area: numeros;
    grid-template-columns: repeat(3, minmax(0, 220px));
    max-width: none;
    gap: 20px;
  }
  .numero { padding: 18px 20px; }
  .numero strong { font-size: 26px; }
  .numero span { font-size: 13px; }

  .carrossel { padding-bottom: 48px; }
  .carrossel-topo, .carrossel-nota { padding-inline: 40px; }
  .carrossel-trilho { grid-template-columns: repeat(5, minmax(0, 1fr)); padding: 8px 40px 12px; gap: 18px; }

  .passos { padding: 52px 40px; }
  .rodape { padding: 44px 40px 52px; }
}

/* ---- página de link-na-bio (ofertas.html) ---- */

.topo { max-width: var(--largura); margin: 0 auto; padding: 24px 22px 8px; text-align: center; }
.topo h1 { font-family: 'Space Grotesk', system-ui, sans-serif; font-size: clamp(22px, 3vw, 30px); margin: 0 0 16px; }
.topo-botoes { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.botao-whatsapp,
.botao-telegram {
  display: inline-block;
  text-decoration: none;
  font-weight: 700;
  font-size: 1rem;
  padding: 12px 24px;
  border-radius: 999px;
}
.botao-whatsapp { background: #1f8a4c; color: #fff; }
.botao-telegram { background: var(--limao); color: #0e0f11; }

.grade {
  max-width: var(--largura);
  margin: 16px auto 0;
  padding: 0 22px 24px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 14px;
}
.grade .card-oferta { flex: initial; }
.card-link {
  display: block;
  margin: 0 12px 12px;
  text-align: center;
  background: var(--limao);
  color: #0e0f11;
  text-decoration: none;
  font-weight: 700;
  font-size: .85rem;
  padding: 8px 0;
  border-radius: 8px;
}
.card-link:hover { background: var(--limao-escuro); color: #0e0f11; }
.card-link:focus-visible { outline: 3px solid var(--limao); outline-offset: 2px; }

/* Carrossel da Amazon: foto, nome e "Ver na Amazon" (preço não entra no site). */
.amz-card { flex: 0 0 170px; scroll-snap-align: start; display: flex; flex-direction: column; gap: 8px; padding: 10px; background: var(--superficie); border: 1px solid var(--borda); border-radius: 16px; }
.amz-card:target { border-color: var(--limao); }
.amz-card-img { width: 100%; height: 140px; object-fit: contain; background: #fff; border-radius: 10px; }
.amz-card-nome { margin: 0; font-size: 13px; line-height: 1.35; color: #e2dfd9; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; flex: 1; }
.amz-comprar { display: block; text-align: center; padding: 10px 8px; border-radius: 10px; background: var(--limao); color: #14160a; font-weight: 700; font-size: 13px; text-decoration: none; }
.amz-comprar:focus-visible { outline: 3px solid var(--limao); outline-offset: 2px; }
.amz-divulgacao { margin-top: 6px; }
.amz-aviso { display: flex; flex-direction: column; gap: 8px; }

/* Chamada pro Instagram embaixo do carrossel da Amazon: bem visível, vira botão no celular. */
.amz-insta { display: flex; flex-direction: column; gap: 6px; margin: 14px 22px 4px; padding: 16px 18px; border: 2px solid var(--limao); border-radius: 16px; background: linear-gradient(135deg, #1a2208, var(--superficie)); color: var(--tinta); text-decoration: none; }
.amz-insta:hover { background: linear-gradient(135deg, #222d0a, var(--superficie)); }
.amz-insta:focus-visible { outline: 3px solid var(--limao); outline-offset: 3px; }
.amz-insta-topo { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--limao); }
.amz-insta-texto { font-size: 18px; line-height: 1.3; font-weight: 600; }
.amz-insta-texto strong { color: var(--limao); }
.amz-insta-botao { align-self: flex-start; margin-top: 4px; padding: 10px 16px; border-radius: 999px; background: var(--limao); color: #14160a; font-weight: 800; font-size: 14px; }
@media (min-width: 700px) { .amz-insta { margin-inline: 32px; flex-direction: row; align-items: center; flex-wrap: wrap; gap: 8px 16px; } .amz-insta-topo { flex-basis: 100%; } .amz-insta-texto { flex: 1; } .amz-insta-botao { align-self: center; margin-top: 0; } }
@media (min-width: 1024px) { .amz-insta { margin-inline: 40px; } }