/* ============================================================================
   MAKRO CHUÍ - CALCULADORA DE CHURRASCO
   Wizard de 5 passos + card de resultado. Reaproveita as variáveis de cor e
   os paddings/tipografia gerais definidos em css/style.css.
   ============================================================================ */

.churrasco-section {
  background-color: #fff7ed;
  /* Foto de asado de fondo (pedido del cliente, 2026-09-18) — el degradado
     encima mantiene el mismo tono cálido de siempre (#fff7ed) para que el
     título y el texto sigan totalmente legibles; la foto se nota sobre
     todo en los bordes y detrás del título, nunca compite con la tarjeta
     blanca de la calculadora (que sigue 100% opaca). */
  background-image:
    linear-gradient(180deg, rgba(255, 247, 237, 0.93) 0%, rgba(255, 247, 237, 0.86) 45%, rgba(255, 247, 237, 0.93) 100%),
    url('../imagen/churrasco-bg.webp');
  background-size: cover;
  background-position: center 30%;
  background-repeat: no-repeat;
  padding: 44px 0;
  text-align: center;
}

/* --------------------------------------------------------------------------
   CARD PRINCIPAL DO WIZARD
   -------------------------------------------------------------------------- */
.bbq-card {
  background: #ffffff;
  border: 1.5px solid #fed7aa;
  border-radius: 24px;
  max-width: 960px;
  margin: 28px auto 0;
  padding: 32px;
  box-shadow: var(--shadow-md);
  text-align: left;
}

/* Indicador de progresso (1..5) + logo-guia (substitui o esquilo da
   referência: um pequeno emblema com o logo da marca que desliza ao longo
   da barra de passos, acompanhando o passo atual). */
.bbq-steps {
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 28px;
  padding-top: 30px;
  gap: 4px;
}

.bbq-mascot {
  position: absolute;
  top: -6px;
  left: 0;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  object-fit: contain;
  background: #ffffff;
  border: 2px solid var(--color-primary-red);
  box-shadow: var(--shadow-sm);
  padding: 3px;
  transform: translateX(-50%);
  transition: left 0.35s ease;
  pointer-events: none;
}

.bbq-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  flex: 1;
  position: relative;
}

.bbq-step::before {
  content: '';
  position: absolute;
  top: 14px;
  left: -50%;
  width: 100%;
  height: 2px;
  background: var(--color-border);
  z-index: 0;
}

/* :first-child (não :first-of-type) nunca bate aqui: o <img id="bbq-mascot">
   é o PRIMEIRO filho de .bbq-steps, antes do primeiro .bbq-step — então
   nenhum .bbq-step é tecnicamente ":first-child", e a linha do passo 1
   nunca era escondida (ficava sobrando à esquerda do círculo "1", pra fora
   do cartão). :first-of-type ignora a mascote (é um <img>, outro tipo de
   tag) e pega certo o primeiro <div class="bbq-step">. */
.bbq-step:first-of-type::before {
  display: none;
}

.bbq-step-dot {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #f1f5f9;
  color: var(--color-text-muted);
  font-size: 12.5px;
  font-weight: 900;
  transition: all 0.2s ease;
}

.bbq-step-label {
  font-size: 10.5px;
  font-weight: 800;
  color: var(--color-text-muted);
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.2px;
}

.bbq-step.is-active .bbq-step-dot {
  background: var(--color-primary-red);
  color: #ffffff;
}

.bbq-step.is-active .bbq-step-label {
  color: var(--color-primary-red);
}

.bbq-step.is-done .bbq-step-dot {
  background: var(--color-primary-green);
  color: #ffffff;
}

.bbq-step.is-done::before {
  background: var(--color-primary-green);
}

/* Perguntas de cada passo */
.bbq-question {
  font-size: 19px;
  font-weight: 900;
  color: var(--color-text-dark);
  margin-bottom: 6px;
}

.bbq-hint {
  font-size: 13px;
  color: var(--color-text-muted);
  margin-bottom: 20px;
}

/* Passo 1 — contadores de convidados */
.bbq-guests-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 10px;
}

.bbq-guest-field {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.bbq-guest-field label {
  font-size: 12.5px;
  font-weight: 800;
  color: var(--color-text-dark);
}

.bbq-stepper {
  display: flex;
  align-items: center;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-pill);
  overflow: hidden;
  width: 100%;
  min-width: 0;
}

.bbq-stepper-btn {
  background: #f8fafc;
  border: none;
  color: var(--color-primary-red);
  font-size: 18px;
  font-weight: 900;
  width: 38px;
  height: 38px;
  flex-shrink: 0;
  cursor: pointer;
  transition: background 0.15s ease;
}

.bbq-stepper-btn:hover {
  background: #fee2e2;
}

.bbq-guest-input {
  flex: 1;
  min-width: 0;
  border: none;
  text-align: center;
  font-size: 16px;
  font-weight: 900;
  color: var(--color-text-dark);
  background: #ffffff;
  padding: 8px 4px;
}

.bbq-guest-hint {
  font-size: 11.5px;
  color: var(--color-text-muted);
  font-style: italic;
}

/* Passo 2 — categorias de carne (abas com ícone) + subcategoria de produtos */
.bbq-meat-cats {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
  margin-bottom: 22px;
}

.bbq-meat-cat {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: #f8fafc;
  border: 1.5px solid var(--color-border);
  border-radius: 14px;
  padding: 8px 8px 6px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.bbq-meat-cat:hover {
  border-color: var(--color-primary-orange);
}

.bbq-meat-cat.is-active {
  background: #fff1e6;
  border-color: var(--color-primary-red);
}

/* Todos os ícones no mesmo tamanho da referência (Carne de Cerdo):
   82% da largura do botão, quadrados — a % escala junto com o botão em
   qualquer tela, com uma margem pequena e visível até a borda. */
.bbq-meat-cat-icon {
  position: relative;
  width: 82%;
  height: auto;
  aspect-ratio: 1 / 1;
  color: #94a3b8;
}

.bbq-meat-cat.is-active .bbq-meat-cat-icon {
  color: var(--color-primary-red);
}

.bbq-meat-cat-icon svg {
  width: 100%;
  height: 100%;
}

.bbq-meat-cat-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.bbq-meat-cat-label {
  font-size: 11px;
  font-weight: 800;
  color: var(--color-text-muted);
  text-align: center;
  line-height: 1.25;
}

.bbq-meat-cat.is-active .bbq-meat-cat-label {
  color: var(--color-primary-red);
}

.bbq-meat-cat-badge {
  position: absolute;
  top: 6px;
  right: 6px;
  background: var(--color-primary-red);
  color: #ffffff;
  font-size: 10px;
  font-weight: 900;
  min-width: 17px;
  height: 17px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 3px;
}

/* Passos 2-5 — grades de seleção (chips) */
.bbq-chip-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

@media (min-width: 640px) {
  .bbq-chip-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 860px) {
  .bbq-chip-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.bbq-chip {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #f8fafc;
  border: 1.5px solid var(--color-border);
  border-radius: 12px;
  padding: 12px 14px;
  cursor: pointer;
  text-align: left;
  transition: all 0.15s ease;
}

.bbq-chip:hover {
  border-color: var(--color-primary-orange);
}

.bbq-chip-check {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  border-radius: 5px;
  border: 1.5px solid #cbd5e1;
  background: #ffffff;
  position: relative;
  transition: all 0.15s ease;
}

.bbq-chip.is-selected {
  background: #fff1e6;
  border-color: var(--color-primary-red);
}

.bbq-chip.is-selected .bbq-chip-check {
  background: var(--color-primary-red);
  border-color: var(--color-primary-red);
}

.bbq-chip.is-selected .bbq-chip-check::after {
  content: '';
  position: absolute;
  left: 5px;
  top: 1px;
  width: 5px;
  height: 9px;
  border: solid #ffffff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.bbq-chip-label {
  font-size: 13px;
  font-weight: 700;
  color: var(--color-text-dark);
}

/* Mensagem de erro de validação */
.bbq-error-msg {
  background: #fef2f2;
  border: 1px solid #fecaca;
  /* Rojo oscuro oficial de la paleta de marca (Pantone 7629 C, #790000) en
     vez de un rojo genérico ajeno a la identidad. */
  color: var(--color-primary-red-dark);
  font-size: 12.5px;
  font-weight: 700;
  padding: 10px 14px;
  border-radius: 10px;
  margin-top: 18px;
}

/* Navegação Voltar / Continuar — sempre empilhados (Voltar em cima,
   Continuar embaixo, centralizados), em qualquer tamanho de tela. */
.bbq-nav-row {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin-top: 24px;
}

.bbq-btn-back,
.bbq-btn-next {
  width: 100%;
  max-width: 360px;
}

/* .btn-pill-red (classe do botão "Continuar") não define justify-content,
   então ao virar largura 100% aqui o texto ficava colado à esquerda em
   vez de centralizado. */
.bbq-btn-next {
  justify-content: center;
}

/* .btn-outline-full define display:flex + width:100%, o que anula o
   atributo nativo [hidden] (o botão "Voltar" ficava visível e forçava
   100% da largura da linha, empurrando "Continuar" para fora da tela).
   Reforça aqui que, oculto, o elemento realmente some. */
#bbq-btn-back[hidden] {
  display: none !important;
}

/* Bloco informativo institucional (texto explicativo da calculadora),
   exibido sempre abaixo do botão Continuar/Voltar, com o mesmo padrão
   "Leia mais / Ler menos" da referência: só o título e o parágrafo de
   introdução ficam visíveis por padrão. */
.bbq-info-block {
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px dashed var(--color-border);
}

.bbq-info-title {
  font-size: 15px;
  font-weight: 900;
  color: var(--color-text-dark);
  margin-bottom: 8px;
}

.bbq-info-intro {
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--color-text-muted);
}

.bbq-info-more {
  margin-top: 14px;
}

.bbq-info-more h4 {
  font-size: 13px;
  font-weight: 800;
  color: var(--color-text-dark);
  margin-top: 16px;
  margin-bottom: 4px;
}

.bbq-info-more p {
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--color-text-muted);
}

.bbq-info-obs-list {
  margin-top: 4px;
  padding-left: 18px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.bbq-info-obs-list li {
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--color-text-muted);
}

.bbq-info-toggle-btn {
  background: none;
  border: none;
  color: var(--color-primary-red);
  font-size: 12.5px;
  font-weight: 800;
  text-decoration: underline;
  cursor: pointer;
  padding: 10px 0 0;
}

.bbq-info-toggle-btn:hover {
  color: var(--color-primary-orange);
}

/* --------------------------------------------------------------------------
   CARD DE RESULTADO
   -------------------------------------------------------------------------- */
.bbq-result-card {
  background: #ffffff;
  border: 1.5px solid #fed7aa;
  border-radius: 24px;
  max-width: 820px;
  margin: 28px auto 0;
  padding: 32px;
  box-shadow: var(--shadow-md);
  text-align: left;
}

.bbq-result-header h3 {
  font-size: 22px;
  font-weight: 900;
  color: var(--color-text-dark);
  margin-bottom: 4px;
}

.bbq-result-header p {
  font-size: 13.5px;
  color: var(--color-text-muted);
  margin-bottom: 16px;
}

.bbq-result-guests {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 24px;
}

.bbq-result-guest-pill {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: #f8fafc;
  border: 1px solid var(--color-border);
  border-radius: 12px;
  padding: 10px 16px;
  min-width: 76px;
}

.bbq-result-guest-pill strong {
  font-size: 18px;
  font-weight: 900;
  color: var(--color-primary-red);
}

.bbq-result-guest-pill span {
  font-size: 10.5px;
  font-weight: 700;
  color: var(--color-text-muted);
  text-transform: uppercase;
}

.bbq-result-guest-pill--total {
  background: var(--color-dark-banner);
  border-color: var(--color-dark-banner);
}

.bbq-result-guest-pill--total strong,
.bbq-result-guest-pill--total span {
  color: #ffffff;
}

.bbq-result-groups {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin-bottom: 20px;
}

.bbq-result-group {
  background: #f8fafc;
  border: 1px solid var(--color-border);
  border-radius: 14px;
  padding: 16px 18px;
}

.bbq-result-group h4 {
  font-size: 13px;
  font-weight: 900;
  color: var(--color-text-dark);
  text-transform: uppercase;
  letter-spacing: 0.3px;
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1.5px solid var(--color-border);
}

.bbq-result-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.bbq-result-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 13px;
}

.bbq-result-list li span {
  color: var(--color-text-dark);
  font-weight: 600;
}

.bbq-result-list li strong {
  color: var(--color-primary-red);
  font-weight: 900;
  white-space: nowrap;
}

.bbq-result-empty {
  font-size: 12.5px;
  color: var(--color-text-muted);
  font-style: italic;
}

.bbq-result-group-hint {
  font-size: 11px;
  color: var(--color-text-muted);
  margin-bottom: 10px;
  margin-top: -4px;
}

.bbq-result-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.bbq-result-tag {
  background: #ffffff;
  border: 1px solid var(--color-border);
  color: var(--color-text-dark);
  font-size: 12px;
  font-weight: 700;
  padding: 5px 12px;
  border-radius: var(--radius-pill);
}

.bbq-result-disclaimer {
  font-size: 11.5px;
  color: var(--color-text-muted);
  font-style: italic;
  margin-bottom: 24px;
  padding-top: 12px;
  border-top: 1px dashed var(--color-border);
}

.bbq-result-cta {
  background: var(--color-light-mint);
  border: 1px solid var(--color-border-green);
  border-radius: 16px;
  padding: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}

.bbq-result-cta-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
  min-width: 220px;
}

.bbq-result-cta-text strong {
  font-size: 14.5px;
  color: var(--color-text-dark);
}

.bbq-result-cta-text span {
  font-size: 12.5px;
  color: var(--color-text-muted);
}

.bbq-result-cta-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 200px;
}

.bbq-result-cta-actions .btn-green-full,
.bbq-result-cta-actions .btn-outline-full {
  width: 100%;
  text-align: center;
}

.bbq-addlist-msg {
  font-size: 12px;
  color: var(--color-text-muted);
  font-style: italic;
  margin-top: 10px;
  text-align: center;
}

.bbq-result-actions {
  display: flex;
  justify-content: center;
  gap: 24px;
}

.bbq-link-btn {
  background: none;
  border: none;
  color: var(--color-text-muted);
  font-size: 12.5px;
  font-weight: 800;
  text-decoration: underline;
  cursor: pointer;
  padding: 4px;
}

.bbq-link-btn:hover {
  color: var(--color-primary-red);
}

/* --------------------------------------------------------------------------
   RESPONSIVO
   -------------------------------------------------------------------------- */
@media (max-width: 600px) {
  .bbq-card,
  .bbq-result-card {
    padding: 22px 18px;
    border-radius: 18px;
  }

  .bbq-step-label {
    display: none;
  }

  .bbq-chip-grid {
    grid-template-columns: 1fr;
  }

  .bbq-guests-row {
    grid-template-columns: 1fr;
  }

  .bbq-meat-cats {
    grid-template-columns: repeat(3, 1fr);
  }

  .bbq-meat-cat-label {
    font-size: 10px;
  }

  .bbq-result-groups {
    grid-template-columns: 1fr;
  }

  .bbq-result-cta {
    flex-direction: column;
    align-items: stretch;
  }

  .bbq-result-cta-actions {
    min-width: 0;
  }
}

@media (min-width: 601px) and (max-width: 820px) {
  .bbq-meat-cats {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media print {
  .churrasco-section .bbq-card,
  .site-header,
  .live-ticker,
  .floating-app-bar,
  #chuibot-widget {
    display: none !important;
  }
}

/* Desktop grande: acompanha o container já ampliado da seção (ver
   .container em css/style.css) — sem isto, o .bbq-card ficava travado em
   960px, sobrando um vão vazio enorme dos dois lados em telas grandes,
   igual ao problema já corrigido nas outras seções. Precisa estar NESTE
   arquivo (não em style.css) porque churrasco-calc.css carrega depois de
   style.css — uma regra em style.css perderia para a declaração original
   de .bbq-card aqui, mesma especificidade, ordem de arquivo decide. */
@media (min-width: 1240px) {
  .bbq-card {
    max-width: 1400px;
  }
}