/* Lista Leve — tokens e componentes compartilhados (landing, app e admin) */
:root {
  --tomate: #C8402B; --tomate-escuro: #A33322; --folha: #237A4A; --folha-escura: #1B5E39;
  --pessego: #FBE3DC; --papel: #FBF6EE; --cafe: #2B1B17; --branco: #FFFFFF;
  --suave: #6A554E; --borda: #EDE1D3; --chip: #8E2C1D; --coral: #FF7A5C; --menta: #7DDBA3;
  --f-titulo: 'Poppins', system-ui, sans-serif; --f-texto: 'Inter', system-ui, sans-serif;
  --r-sm: 12px; --r-md: 16px; --r-lg: 22px; --r-pill: 999px;
  --sombra: 0 24px 48px -28px rgba(43, 27, 23, .35);
  --toque: 46px;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--papel); color: var(--cafe); font-family: var(--f-texto); font-size: 15px; line-height: 1.5; -webkit-font-smoothing: antialiased; }
h1, h2, h3 { font-family: var(--f-titulo); font-weight: 800; line-height: 1.15; margin: 0; }
p { margin: 0; }
a { color: var(--tomate); }
a:hover { color: var(--tomate-escuro); }
img { max-width: 100%; display: block; }
button { font: inherit; }
:focus-visible { outline: 3px solid var(--coral); outline-offset: 2px; }

.wrap { width: 100%; max-width: 1120px; margin: 0 auto; padding: 0 16px; }
.btn { display: inline-flex; align-items: center; justify-content: center; text-align: center; gap: 8px; min-height: var(--toque); padding: 0 22px; background: var(--tomate); color: var(--branco); font-weight: 700; border: 0; border-radius: var(--r-pill); text-decoration: none; cursor: pointer; transition: background .15s, transform .1s; }
.btn:hover { background: var(--tomate-escuro); color: var(--branco); }
.btn:active { transform: translateY(1px) scale(.98); }
.btn.sec { background: var(--branco); color: var(--cafe); border: 1.5px solid var(--borda); }
.btn.sec:hover { border-color: var(--tomate); color: var(--tomate); }
.btn.verde { background: var(--folha); }
.btn.verde:hover { background: var(--folha-escura); }
.btn[disabled] { opacity: .55; cursor: wait; }

.cartao { background: var(--branco); border: 1px solid var(--borda); border-radius: var(--r-lg); }
.chip { display: inline-flex; align-items: center; gap: 6px; background: var(--pessego); color: var(--chip); font-size: 13px; font-weight: 600; padding: 0 14px; min-height: 38px; border-radius: var(--r-pill); border: 0; cursor: pointer; white-space: nowrap; text-decoration: none; }
.chip[aria-pressed="true"], .chip.ativo { background: var(--tomate); color: var(--branco); }
.selo { display: inline-block; background: var(--folha); color: var(--branco); font-size: 12px; font-weight: 700; padding: 3px 8px; border-radius: var(--r-pill); }
.selo.loja { background: var(--papel); color: var(--suave); border: 1px solid var(--borda); }
.de { font-size: 13px; color: var(--suave); text-decoration: line-through; }
.por { font-family: var(--f-titulo); font-weight: 800; font-size: 22px; color: var(--folha); line-height: 1.1; }
.economia { font-size: 13px; font-weight: 600; color: var(--folha); }
.suave { color: var(--suave); }
.aviso { font-size: 12px; color: var(--suave); }
.msg { font-size: 14px; color: var(--chip); background: var(--pessego); border-radius: var(--r-sm); padding: 12px; margin: 8px 0; }
.msg:empty { display: none; }
[hidden] { display: none !important; }

/* Card de oferta */
.oferta { display: flex; flex-direction: column; gap: 10px; padding: 14px; background: var(--branco); border: 1px solid var(--borda); border-radius: var(--r-lg); min-width: 0; }
.oferta .foto { position: relative; aspect-ratio: 1; border-radius: var(--r-md); background: var(--papel); overflow: hidden; display: grid; place-items: center; }
.oferta .foto img { width: 100%; height: 100%; object-fit: contain; }
.oferta .foto .selo { position: absolute; top: 8px; left: 8px; }
.oferta h3 { font-family: var(--f-texto); font-weight: 600; font-size: 14px; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.7em; }
.oferta .meta { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; font-size: 12px; color: var(--suave); }
.oferta .btn { min-height: 42px; width: 100%; }

@keyframes entra { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes pula { 0% { transform: scale(.6); } 60% { transform: scale(1.12); } 100% { transform: scale(1); } }
.entra { animation: entra .35s ease both; }
.oferta .foto .selo { animation: pula .4s ease both .15s; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }