.budget-hero .page-hero h1,
.budget-hero h1 {
  max-width: 13ch;
}

.budget-hero-card {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface-card);
  box-shadow: var(--shadow-lg);
}

.budget-hero-card img {
  width: 100%;
  height: 100%;
  min-height: 360px;
  object-fit: cover;
}

.budget-section {
  --budget-line-strong: rgba(13, 24, 34, 0.3);
  --budget-line-field: rgba(13, 24, 34, 0.42);
  --budget-line-focus: rgb(var(--accent-rgb) / 0.7);
  padding-top: 26px;
}

.budget-shell {
  display: grid;
  grid-template-columns: minmax(240px, 0.34fr) minmax(0, 0.66fr);
  gap: 18px;
  align-items: start;
}

.budget-sidebar,
.budget-panel,
.budget-how-card {
  border: 2px solid var(--budget-line-strong);
  border-radius: var(--radius-lg);
  background: var(--surface-card);
  box-shadow: var(--shadow-md);
  backdrop-filter: blur(18px);
}

.budget-sidebar {
  position: sticky;
  top: 98px;
  display: grid;
  gap: 18px;
  padding: 22px;
}

.budget-sidebar h2,
.budget-step-copy h2,
.budget-subsection h3,
.budget-item-group h3,
.budget-recap h3,
.budget-decision h3,
.budget-complete h2 {
  margin: 0;
  font-family: var(--font-heading);
  color: var(--ink);
  line-height: 1.16;
}

.budget-sidebar p,
.budget-step-copy p,
.budget-field small,
.budget-total-card span,
.budget-total-card small,
.budget-recap dd,
.budget-warning,
.budget-note,
.budget-alert,
.budget-success,
.budget-shared-rules,
.budget-complete p {
  color: var(--ink-soft);
  line-height: 1.66;
}

.budget-summary {
  display: grid;
  gap: 12px;
}

.budget-summary div {
  display: grid;
  gap: 5px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface-soft);
}

.budget-summary span {
  color: var(--ink-soft);
  font-size: 0.78rem;
  font-weight: 800;
  text-transform: uppercase;
}

.budget-summary strong {
  color: var(--ink);
  font-family: var(--font-heading);
  font-size: 0.96rem;
  line-height: 1.35;
}

.budget-panel {
  padding: 22px;
}

.budget-progress {
  display: grid;
  gap: 10px;
  margin-bottom: 20px;
}

.budget-progress-top {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  color: var(--ink-soft);
  font-size: 0.9rem;
  font-weight: 800;
}

.budget-progress-track {
  height: 10px;
  overflow: hidden;
  border-radius: 999px;
  background: rgb(var(--accent-rgb) / 0.11);
}

.budget-progress-fill {
  width: 0%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(135deg, var(--accent), var(--accent-warm));
  transition: width 0.22s ease;
}

.budget-form {
  display: grid;
  gap: 20px;
}

.budget-step {
  display: grid;
  gap: 20px;
}

.budget-step-copy {
  display: grid;
  gap: 12px;
}

.budget-step-copy h2,
.budget-complete h2 {
  font-size: clamp(1.75rem, 3vw, 2.45rem);
}

.budget-option-grid,
.budget-item-grid,
.budget-form-grid,
.budget-check-grid,
.budget-result-grid,
.budget-decision-grid,
.budget-mini-actions,
.budget-how-grid,
.budget-access-grid {
  display: grid;
  gap: 12px;
}

.budget-option-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.budget-fast-choice .budget-option-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.budget-option {
  display: grid;
  gap: 8px;
  min-height: 102px;
  padding: 16px;
  border: 2px solid var(--budget-line-strong);
  border-radius: 18px;
  background: var(--surface-input);
  color: var(--ink);
  text-align: left;
  transition:
    transform 0.2s ease,
    border-color 0.2s ease,
    box-shadow 0.2s ease,
    background 0.2s ease;
}

.budget-option:hover,
.budget-option:focus-visible,
.budget-option.is-selected {
  border-color: var(--budget-line-focus);
  background: linear-gradient(135deg, rgb(var(--accent-rgb) / 0.1), var(--surface-elevated));
  box-shadow: 0 14px 32px rgb(var(--accent-rgb) / 0.1);
  transform: translateY(-2px);
}

.budget-option strong {
  font-family: var(--font-heading);
  line-height: 1.25;
}

.budget-option span {
  color: var(--ink-soft);
  font-size: 0.92rem;
  line-height: 1.55;
}

.budget-form-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.budget-field,
.budget-item-card {
  display: grid;
  gap: 9px;
  color: var(--ink);
  font-weight: 700;
}

.budget-field span,
.budget-field > label,
.budget-item-card span {
  font-size: 0.94rem;
}

.budget-field input,
.budget-field select,
.budget-field textarea,
.budget-item-card input {
  width: 100%;
  min-height: 52px;
  border: 2px solid var(--budget-line-field);
  border-radius: 16px;
  background: var(--surface-input);
  color: var(--ink);
  padding: 14px 15px;
}

.budget-field-with-action {
  align-content: start;
}

.budget-cep-control {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: stretch;
}

.budget-cep-control input {
  min-width: 0;
}

.budget-cep-use {
  min-height: 52px;
  padding-inline: 20px;
  white-space: nowrap;
}

.budget-field textarea {
  resize: vertical;
  min-height: 132px;
}

.budget-field input:focus,
.budget-field select:focus,
.budget-field textarea:focus,
.budget-item-card input:focus {
  outline: none;
  border-color: var(--budget-line-focus);
  box-shadow: 0 0 0 5px rgb(var(--accent-rgb) / 0.12);
}

.budget-subsection,
.budget-item-group,
.budget-recap,
.budget-decision,
.budget-shared-rules,
.budget-preview-message {
  display: grid;
  gap: 14px;
  padding: 18px;
  border: 2px solid var(--budget-line-strong);
  border-radius: var(--radius-md);
  background: var(--surface-soft);
}

.budget-items {
  display: grid;
  gap: 16px;
}

.budget-details-optional {
  display: grid;
  gap: 14px;
  padding: 16px;
  border: 2px solid var(--budget-line-strong);
  border-radius: var(--radius-md);
  background: var(--surface-soft);
}

.budget-details-optional summary {
  cursor: pointer;
  color: var(--ink);
  font-family: var(--font-heading);
  font-weight: 800;
}

.budget-details-optional[open] summary {
  margin-bottom: 14px;
}

.budget-item-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.budget-access-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.budget-item-card {
  padding: 14px;
  border: 2px solid var(--budget-line-field);
  border-radius: 16px;
  background: var(--surface-input);
}

.budget-check-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.budget-check-grid label,
.budget-consent {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 14px;
  border: 2px solid var(--budget-line-field);
  border-radius: 16px;
  background: var(--surface-input);
  color: var(--ink);
  font-weight: 700;
  line-height: 1.45;
}

.budget-check-grid input,
.budget-consent input {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  margin-top: 2px;
}

.budget-note,
.budget-alert,
.budget-success,
.budget-warning {
  display: grid;
  gap: 12px;
  padding: 16px;
  border-radius: 18px;
  border: 1px solid var(--line);
}

.budget-note {
  background: rgb(var(--accent-rgb) / 0.08);
}

.budget-alert {
  border-color: rgba(195, 77, 28, 0.22);
  background: rgba(255, 245, 235, 0.9);
  color: #8a3a10;
}

.budget-success {
  border-color: rgba(20, 149, 109, 0.18);
  background: rgba(231, 251, 244, 0.9);
  color: #0e7454;
}

.budget-warning {
  border-color: rgba(210, 133, 27, 0.2);
  background: rgba(255, 248, 234, 0.9);
}

.budget-result-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.budget-total-card {
  display: grid;
  gap: 8px;
  min-height: 122px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--surface-elevated);
}

.budget-total-card strong {
  font-family: var(--font-heading);
  color: var(--ink);
  font-size: clamp(1.25rem, 2vw, 1.72rem);
  line-height: 1.2;
}

.budget-total-card-economy {
  grid-column: 1 / -1;
  background: linear-gradient(135deg, rgba(20, 149, 109, 0.1), var(--surface-elevated));
}

.budget-recap dl {
  display: grid;
  gap: 10px;
  margin: 0;
}

.budget-recap dl > div {
  display: grid;
  grid-template-columns: minmax(120px, 0.28fr) minmax(0, 0.72fr);
  gap: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
}

.budget-recap dl > div:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.budget-recap dt {
  color: var(--ink);
  font-weight: 800;
}

.budget-recap dd {
  margin: 0;
}

.budget-decision-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.budget-decision-grid .button {
  min-height: 58px;
  white-space: normal;
  text-align: center;
}

.button-inline {
  width: fit-content;
}

.budget-mini-actions {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.budget-shared-rules ul {
  display: grid;
  gap: 8px;
  margin: 0;
  padding-left: 20px;
}

.budget-actions {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.budget-actions .button {
  min-width: 150px;
}

.budget-errors {
  display: grid;
  gap: 6px;
  padding: 14px 16px;
  border: 1px solid rgba(180, 44, 44, 0.25);
  border-radius: 16px;
  background: rgba(255, 237, 237, 0.94);
  color: #9c2222;
  font-weight: 700;
}

.budget-complete {
  display: grid;
  gap: 18px;
}

.budget-preview-message pre {
  max-height: 360px;
  overflow: auto;
  margin: 0;
  padding: 16px;
  border-radius: 16px;
  background: #071019;
  color: #f4f7fb;
  white-space: pre-wrap;
  line-height: 1.55;
}

.budget-whatsapp-final {
  width: fit-content;
}

.budget-how-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.budget-how-card {
  display: grid;
  gap: 12px;
  padding: 22px;
}

.budget-how-card strong {
  font-family: var(--font-heading);
  color: var(--ink);
}

.budget-how-card p {
  color: var(--ink-soft);
  line-height: 1.66;
}

@media (max-width: 980px) {
  .budget-shell {
    grid-template-columns: 1fr;
  }

  .budget-sidebar {
    position: static;
  }

  .budget-summary {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .budget-how-grid {
    grid-template-columns: 1fr;
  }

}

@media (max-width: 760px) {
  .budget-hero-card img {
    min-height: 240px;
  }

  .budget-panel,
  .budget-sidebar {
    padding: 16px;
    border-radius: 22px;
  }

  .budget-option-grid,
  .budget-fast-choice .budget-option-grid,
  .budget-form-grid,
  .budget-item-grid,
  .budget-check-grid,
  .budget-access-grid,
  .budget-result-grid,
  .budget-decision-grid,
  .budget-mini-actions,
  .budget-summary {
    grid-template-columns: 1fr;
  }

  .budget-option {
    min-height: auto;
  }

  .budget-recap dl > div {
    grid-template-columns: 1fr;
    gap: 4px;
  }

  .budget-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .budget-actions .button,
  .budget-whatsapp-final,
  .button-inline {
    width: 100%;
  }

}