/* =========================================================
   PizzaX — menu principal (hub de cards, tema claro)
   Depende de px-core.css (tokens).
   ========================================================= */
.px-hub{
    font-family:var(--px-body);
    color:var(--px-ink);
    max-width:1080px;margin:0 auto;padding:30px 24px 60px;box-sizing:border-box;
}
.px-hub *{box-sizing:border-box}

.px-hub__head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-bottom:26px}
.px-hub__head h2{
    font-family:var(--px-display);font-weight:800;font-size:clamp(24px,3vw,33px);
    letter-spacing:-.02em;line-height:1.05;margin:0 0 6px;
}
.px-hub__head h2 b{color:var(--px-lime-ink)}
.px-hub__head p{margin:0;color:var(--px-muted);font-size:15px}

.px-grid{
    list-style:none;margin:0;padding:0;
    display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:18px;
}
.px-grid li{margin:0;padding:0}

.px-card{
    display:flex;gap:16px;align-items:flex-start;
    background:var(--px-card);border:1px solid var(--px-line);border-radius:18px;
    padding:18px;height:100%;text-decoration:none;color:inherit;position:relative;overflow:hidden;
    transition:transform .18s ease, box-shadow .22s ease, border-color .18s ease;
}
.px-card::before{
    content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--px-lime-ink);
    transform:scaleY(0);transform-origin:top;transition:transform .22s ease;
}
.px-card:hover{transform:translateY(-3px);box-shadow:0 18px 40px -22px rgba(19,21,14,.45);border-color:#d9ddcb}
.px-card:hover::before{transform:scaleY(1)}

.px-card__img{
    flex:0 0 84px;width:84px;height:84px;border-radius:14px;overflow:hidden;
    background:#f6f7f1;border:1px solid var(--px-line);display:flex;align-items:center;justify-content:center;
}
.px-card__img img{width:100%;height:100%;object-fit:cover;display:block}
.px-card__body{flex:1;min-width:0}
.px-card__eyebrow{font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--px-lime-ink);margin-bottom:5px}
.px-card__title{
    font-family:var(--px-display);font-weight:700;font-size:18px;letter-spacing:-.01em;
    margin-bottom:6px;display:flex;align-items:center;gap:7px;
}
.px-card__title svg{opacity:0;transform:translateX(-4px);transition:.2s;color:var(--px-ink)}
.px-card:hover .px-card__title svg{opacity:1;transform:translateX(0)}
.px-card__desc{font-size:13.5px;line-height:1.55;color:var(--px-muted)}

@media (max-width:560px){
    .px-grid{grid-template-columns:1fr}
    .px-card__img{flex-basis:64px;width:64px;height:64px}
}