/* === Cerveja festa === */
.cerv-page .cerv-app { padding: 20px; }
.cerv-inputs { display: grid; grid-template-columns: 1fr 2fr 2fr 1.5fr; gap: 12px; margin-bottom: 22px; }
.cerv-input { background: #fffbeb; border: 2px solid #fcd34d; border-radius: 12px; padding: 12px 14px; }
.cerv-input label { display: block; font-size: 11px; color: #78350f; font-weight: 700; text-transform: uppercase; margin-bottom: 8px; letter-spacing: 0.3px; }
.cerv-stepper { display: flex; align-items: center; gap: 8px; background: #fff; border: 1px solid #fcd34d; border-radius: 999px; padding: 4px 6px; }
.cerv-stepper button { width: 30px; height: 30px; border-radius: 50%; border: 0; background: #f59e0b; color: #fff; font-size: 16px; font-weight: 700; cursor: pointer; }
.cerv-stepper span { flex: 1; text-align: center; font-size: 20px; font-weight: 800; color: #78350f; }
.cerv-pills { display: flex; gap: 4px; flex-wrap: wrap; background: rgba(252,211,77,0.4); border-radius: 999px; padding: 3px; }
.cerv-pills button { flex: 1; min-width: 0; background: transparent; border: 0; padding: 7px 8px; border-radius: 999px; font-size: 12px; font-weight: 600; color: #78350f; cursor: pointer; }
.cerv-pills button.active { background: #f59e0b; color: #fff; }

.cerv-hero-result { display: flex; align-items: center; gap: 24px; background: linear-gradient(135deg, #f59e0b 0%, #b45309 100%); color: #fff; border-radius: 18px; padding: 26px; margin-bottom: 22px; box-shadow: 0 10px 30px rgba(245,158,11,0.3); }
.cerv-glass { font-size: 80px; line-height: 1; }
.cerv-hero-text .cerv-hero-label { font-size: 12px; text-transform: uppercase; letter-spacing: 0.8px; opacity: 0.85; font-weight: 600; }
.cerv-hero-text .cerv-hero-value { font-size: 56px; font-weight: 900; line-height: 1; margin: 6px 0; font-family: 'Inter', system-ui, sans-serif; letter-spacing: -1px; }
.cerv-hero-text .cerv-hero-sub { font-size: 14px; opacity: 0.9; }

.cerv-emb-grid, .cerv-extra-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; margin-bottom: 18px; }
.cerv-emb, .cerv-extra-card { background: #fff; border: 2px solid #fcd34d; border-radius: 12px; padding: 16px; text-align: center; }
.cerv-emb-icon { font-size: 32px; line-height: 1; }
.cerv-emb-qty { font-size: 24px; font-weight: 900; color: #b45309; margin-top: 4px; font-family: 'Inter', system-ui, sans-serif; }
.cerv-emb-label { font-size: 12px; color: #78350f; margin-top: 2px; }

.cerv-extra h3 { font-size: 15px; font-weight: 700; margin: 14px 0 12px; color: #0f172a; }

.cerv-content { margin-top: 20px; }
.cerv-content h2 { margin-top: 0; }
.cerv-content p { color: #475569; line-height: 1.7; margin: 0 0 14px; }

@media (max-width: 820px) {
  .cerv-inputs { grid-template-columns: 1fr 1fr; }
  .cerv-hero-result { flex-direction: column; text-align: center; padding: 22px; }
  .cerv-glass { font-size: 60px; }
  .cerv-hero-value { font-size: 40px !important; }
}