:root {
  --oncoto-orange: #ff5a0b;
  --oncoto-green: #2fbf71;
  --oncoto-brown: #2b1f16;
  --oncoto-light: #f5f5f5;
  --oncoto-border: #dedbd7;
  --status-active-bg: #2fbf71;
  --status-active-color: white;
  --status-closed-bg: #d30303;
  --status-closed-color: white;
  --status-arriving-bg: #ff5a0b;
  --status-arriving-color: white;
  --status-upcoming-bg: #ffab44;
  --status-upcoming-color: black;
}

html { font-size: 16px; }
body {
  margin: 0;
  color: var(--oncoto-brown);
  background: var(--oncoto-light);
  font-family: Inter, Arial, sans-serif;
}

h1, h2, h3, .navbar-brand { font-family: Nunito, Inter, sans-serif; font-weight: 800; }
h1 { font-size: clamp(2rem, 3vw, 3.4rem); line-height: 1.08; }
h2 { font-size: 1.35rem; }
h3 { font-size: 1rem; }
a { color: #08763d; }

.btn { border-radius: .8rem; font-weight: 700; min-height: 44px; }
.btn-oncoto { background: #008c3b; color: white; border-color: #008c3b; }
.btn-oncoto:hover, .btn-oncoto:focus { background: #006f30; color: white; border-color: #006f30; }
.btn-outline-success { color: #08763d; border-color: #08763d; }
.form-control, .form-select { border-radius: .75rem; min-height: 44px; }
.form-control:focus, .form-select:focus, .btn:focus { box-shadow: 0 0 0 .22rem rgba(47,191,113,.28); border-color: var(--oncoto-green); }
.validation-summary-valid, .field-validation-valid { display: none; }
.validation-summary-errors { margin-bottom: 1rem; }
.validation-summary-errors ul { margin: 0; padding-left: 1.2rem; }
.field-validation-error { display: block; margin: -.25rem 0 .65rem; font-size: .875rem; font-weight: 600; }

.navbar { box-shadow: 0 3px 16px rgba(43,31,22,.06); }
.navbar .container-fluid { max-width: 1200px; }
.accessibility-tools { font-weight: 800; color: var(--oncoto-brown); }

.hero-band {
  padding: 4rem 0 3rem;
  background:
    linear-gradient(90deg, rgba(255,255,255,.96) 0%, rgba(255,255,255,.84) 48%, rgba(255,255,255,.2) 100%),
    url("https://images.unsplash.com/photo-1488459716781-31db52582fe9?auto=format&fit=crop&w=1400&q=80") center/cover;
}
.hero-band .lead { max-width: 40rem; font-size: 1.16rem; }
.hero-pin { width: min(310px, 60vw); filter: drop-shadow(0 18px 24px rgba(43,31,22,.18)); }
.feature-card, .simple-card {
  background: white;
  border: 1px solid var(--oncoto-border);
  border-radius: .8rem;
  padding: 1.25rem;
  box-shadow: 0 8px 24px rgba(43,31,22,.05);
}
.feature-card span { display: block; color: var(--oncoto-orange); font-size: 2.1rem; margin-bottom: .5rem; }
.feature-card p, .simple-card p { margin-bottom: .45rem; }
.cta-band { padding: 1.5rem 0; background: linear-gradient(180deg, #00a447, #008c3b); color: white; }
.readable { max-width: 920px; }
.pix-box { max-width: 420px; }
.search-box { background: white; border: 1px solid var(--oncoto-border); padding: 1rem; border-radius: .8rem; }

.business-hero {
  min-height: 330px;
  display: flex;
  align-items: end;
  background-size: cover;
  background-position: center;
  color: white;
  padding: 4rem 0 2rem;
}
.business-hero-content { display: flex; align-items: center; gap: 1.25rem; max-width: 760px; }
.business-logo { width: 136px; height: 136px; object-fit: contain; background: white; border-radius: 50%; padding: .6rem; box-shadow: 0 10px 30px rgba(0,0,0,.25); }
.status-pill { display: inline-block; padding: .4rem .8rem; border-radius: 999px; background: white; color: var(--oncoto-brown); font-weight: 800; margin-bottom: .5rem; }
.status-ActiveNow { background: var(--status-active-bg); color: var(--status-active-color); }
.status-Closed { background: var(--status-closed-bg); color: var(--status-closed-color); }
.status-ArrivingSoon { background: var(--status-arriving-bg); color: var(--status-arriving-color); }
.status-UpcomingAttendance { background: var(--status-upcoming-bg); color: var(--status-upcoming-color); }
.product-line { display: flex; justify-content: space-between; gap: 1rem; border-bottom: 1px solid #eee; padding-bottom: .45rem; }
.qr-img { width: min(240px, 70vw); height: auto; }

@media (max-width: 760px) {
  .business-hero-content { align-items: start; flex-direction: column; }
  .business-logo { width: 112px; height: 112px; }
}