/* =========================================================
   PizzaX — base do design moderno (compartilhada)
   Tokens de marca, tipografia e primitivos reutilizaveis.
   Identidade: preto + verde-limao + branco.
   ========================================================= */
@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,500;12..96,600;12..96,700;12..96,800&family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap');

:root{
    /* tipografia */
    --px-display:"Bricolage Grotesque", sans-serif;
    --px-body:"Plus Jakarta Sans", Arial, Helvetica, sans-serif;

    /* marca */
    --px-lime:#c4e000;        /* limao vivo (sobre fundo escuro) */
    --px-lime-deep:#a6bd00;   /* limao p/ gradientes/hover */
    --px-lime-ink:#9bba00;    /* limao legivel sobre fundo claro */
    --px-lime-soft:#eef6c4;   /* limao suave (fundos) */

    /* neutros */
    --px-ink:#13150e;         /* quase-preto quente (texto/escuro) */
    --px-ink-2:#14160d;
    --px-muted:#6b7160;       /* texto secundario claro */
    --px-muted-dark:#9aa08a;  /* texto secundario escuro */
    --px-line:#e7e9e1;        /* bordas claras */
    --px-bg:#f0f1ec;          /* fundo claro */
    --px-card:#ffffff;
}

/* ---------- botao primitivo ---------- */
.px-btn{
    display:inline-flex;align-items:center;justify-content:center;gap:9px;
    font-family:var(--px-display);font-weight:700;font-size:15px;letter-spacing:.01em;
    border:none;cursor:pointer;text-decoration:none;
    padding:13px 18px;border-radius:12px;
    transition:transform .15s, box-shadow .2s, filter .2s, background .2s, color .2s;
}
.px-btn--lime{
    background:linear-gradient(180deg,var(--px-lime),var(--px-lime-deep));
    color:#10130a !important;
    box-shadow:0 10px 26px -10px rgba(196,224,0,.55);
}
.px-btn--lime:hover{transform:translateY(-2px);box-shadow:0 16px 34px -12px rgba(196,224,0,.7);filter:brightness(1.04)}
.px-btn--lime:active{transform:translateY(0)}
.px-btn--ghost{background:transparent;border:1px solid var(--px-line);color:var(--px-ink) !important}
.px-btn--ghost:hover{border-color:var(--px-ink);background:#fafbf6}
.px-btn--sm{padding:7px 12px;font-size:13px;border-radius:9px;gap:6px}

/* ---------- chip/badge ---------- */
.px-badge{
    display:inline-flex;align-items:center;gap:8px;
    background:var(--px-ink);color:#fff;
    padding:9px 15px;border-radius:999px;font-family:var(--px-body);font-size:13px;font-weight:600;
    white-space:nowrap;
}
.px-badge .px-dot{width:8px;height:8px;border-radius:50%;background:var(--px-lime);box-shadow:0 0 10px var(--px-lime)}

/* ---------- animacao de entrada ---------- */
@keyframes px-rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}