/* Cores da marca Achadinhos (logo oficial aprovado pelo dono em 15/10/2026):
   azul do logo, azul-marinho do contorno, amarelo das estrelinhas.
   Só a página /achadinhos carrega este arquivo, por cima do estilo.css —
   a home do site continua no visual dela. */

:root {
  --fundo: #f2f8ff;
  --superficie: #ffffff;
  --borda: #d5e6f9;
  --tinta: #0b2a5a;
  --cinza: #4d6a91;
  --cinza-fraco: #7d94b4;
  --limao: #1e6fd9;          /* cor de destaque: agora é o azul do logo */
  --limao-escuro: #1557b8;
  --amarelo: #ffd23f;
  --vermelho: #e0122f;
  --titulo: 'Poppins', 'Trebuchet MS', system-ui, sans-serif;
}

body { font-family: 'Nunito', system-ui, -apple-system, "Segoe UI", sans-serif; }
h1, h2 { font-family: var(--titulo); }
a { color: var(--limao); }
a:hover { color: var(--limao-escuro); }

/* ---- topo: faixa azul que ocupa a largura toda ---- */
.hero {
  color: #fff;
  border-image: linear-gradient(180deg, #1557b8 0%, #1e6fd9 55%, #3f9cf0 100%) fill 0 // 0 100vw;
}
.hero h1 { font-family: var(--titulo); font-weight: 800; letter-spacing: -1px; color: #fff; text-shadow: 0 4px 0 rgba(11, 42, 90, .45); }
.hero h1 em { color: var(--amarelo); }
.hero p { color: #e1efff; }

.marca-logo {
  width: 104px; height: 104px; border-radius: 50%; display: block;
  background: #fff; box-shadow: 0 0 0 4px var(--amarelo), 0 10px 24px rgba(8, 30, 70, .35);
}
.selo-diario { color: #fff; border-color: rgba(255, 255, 255, .45); background: rgba(255, 255, 255, .12); font-weight: 700; }
.selo-diario::before { background: var(--amarelo); }

.btn-app { font-family: var(--titulo); box-shadow: inset 0 2px 0 rgba(255, 255, 255, .28), inset 0 -3px 0 rgba(0, 0, 0, .18), 0 8px 20px rgba(8, 30, 70, .35); }
.btn-app-telegram { box-shadow: inset 0 0 0 3px rgba(255, 255, 255, .85), inset 0 -3px 0 rgba(0, 0, 0, .18), 0 8px 20px rgba(8, 30, 70, .35); }

.numero { background: rgba(255, 255, 255, .14); border-color: rgba(255, 255, 255, .32); }
.numero strong { font-family: var(--titulo); color: #fff; }
.numero span { color: #d4e8ff; }

/* ---- carrosséis em fundo claro ---- */
.etiqueta { color: var(--limao); font-weight: 800; }
.card-oferta, .amz-card { background: #fff; border-color: var(--borda); box-shadow: 0 6px 18px rgba(11, 42, 90, .08); }
.card-oferta:has(.card-post-link):hover, .amz-card:target { border-color: var(--limao); }
.card-selo { background: var(--vermelho); color: #fff; font-family: var(--titulo); font-weight: 800; transform: rotate(-3deg); }
.card-titulo, .amz-card-nome { color: #1d3557; }
.preco-por { font-family: var(--titulo); color: var(--limao-escuro); }
.card-cta { color: var(--limao); }
.amz-comprar { background: var(--amarelo); color: var(--tinta); }
.amz-insta { border-color: var(--limao); background: linear-gradient(135deg, #e3f0ff, #fff); }
.amz-insta:hover { background: linear-gradient(135deg, #d4e8ff, #fff); }
.amz-insta-topo, .amz-insta-texto strong { color: var(--limao); }
.amz-insta-botao { background: var(--limao); color: #fff; }

/* ---- abas por loja e selo da loja no card (15/10/2026) ---- */
.abas-lojas { display: flex; gap: 8px; overflow-x: auto; padding: 0 22px 4px; scrollbar-width: none; }
.abas-lojas::-webkit-scrollbar { display: none; }
.aba-loja {
  flex: none; display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  border: 2px solid var(--borda); background: #fff; color: var(--tinta); border-radius: 999px;
  padding: 8px 14px; font: 800 14px/1 'Nunito', system-ui, sans-serif;
}
.aba-loja i { font-style: normal; font-size: 12px; color: var(--cinza); font-variant-numeric: tabular-nums; }
.aba-loja[aria-selected="true"] { background: var(--limao); border-color: var(--limao); color: #fff; }
.aba-loja[aria-selected="true"] i { color: #d4e8ff; }
.aba-loja:focus-visible { outline: 3px solid var(--amarelo); outline-offset: 2px; }
.card-loja { position: absolute; top: 8px; right: 8px; font: 800 10px/1 'Nunito', system-ui, sans-serif; letter-spacing: .3px; text-transform: uppercase; padding: 5px 7px; border-radius: 6px; color: #fff; background: var(--tinta); }
.card-loja[data-loja="mercadolivre"] { background: #ffe600; color: #2d3277; }
.card-loja[data-loja="shopee"] { background: #ee4d2d; }
.card-loja[data-loja="natura"] { background: #f08a24; }
.card-loja[data-loja="avon"] { background: #e4007c; }
.card-loja[data-loja="polishop"] { background: #d4001a; }
.card-loja[data-loja="amazon"] { background: #232f3e; }
/* Card aberto pelo link do Telegram (#ASIN): destaque até a pessoa trocar de aba. */
.amz-card.amz-destaque { border-color: var(--amarelo); box-shadow: 0 0 0 3px var(--amarelo), 0 6px 18px rgba(11, 42, 90, .12); }
@media (min-width: 700px) { .abas-lojas { padding-inline: 32px; } }
@media (min-width: 1024px) { .abas-lojas { padding-inline: 40px; } }

/* ---- como funciona ---- */
.passos { border-top: 0; }
.passos li { background: #fff; color: var(--tinta); border-color: var(--borda); box-shadow: 0 6px 18px rgba(11, 42, 90, .06); }
.passo-num { font-family: var(--titulo); color: var(--limao); }

.rodape { color: var(--cinza); }
.rodape a { color: var(--limao); }

@media (min-width: 700px) { .marca-logo { width: 124px; height: 124px; } }
@media (min-width: 1024px) { .marca-logo { width: 140px; height: 140px; } }
