:root {
  --brand: #0B1F3A;
  --accent: #F5B700;
}

html { scroll-behavior: smooth; }

body { -webkit-tap-highlight-color: transparent; }

.safe-bottom { padding-bottom: env(safe-area-inset-bottom); }

.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3rem;
  padding: 0 1.25rem;
  border-radius: 0.75rem;
  background: var(--accent);
  color: var(--brand);
  font-weight: 700;
}

.btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3rem;
  padding: 0 1.25rem;
  border-radius: 0.75rem;
  background: var(--brand);
  color: #fff;
  font-weight: 600;
}

.field {
  width: 100%;
  min-height: 3rem;
  border-radius: 0.75rem;
  border: 1px solid #d1d5db;
  background: #fff;
  padding: 0.75rem 1rem;
  font-size: 1rem;
}

.field:focus {
  outline: 2px solid color-mix(in srgb, var(--accent) 70%, white);
  border-color: var(--brand);
}

.card-soft {
  background: #fff;
  border-radius: 1rem;
  box-shadow: 0 1px 2px rgb(15 23 42 / 6%), 0 8px 24px rgb(15 23 42 / 4%);
}

.hero-wash {
  background:
    linear-gradient(160deg, rgba(11,31,58,.88), rgba(11,31,58,.55)),
    url('https://images.unsplash.com/photo-1601362840469-51e4d8d58785?auto=format&fit=crop&w=1600&q=80') center/cover;
}

/* Carrossel: proporção 1600×600 (8:3) — a imagem cabe sem corte feio */
.banner-shell {
  width: 100%;
  max-width: 72rem; /* ~max-w-6xl */
  margin-left: auto;
  margin-right: auto;
}
.banner-carousel {
  aspect-ratio: 8 / 3;
  width: 100%;
  height: auto;
}
@media (max-width: 639px) {
  .banner-carousel {
    aspect-ratio: 16 / 9;
  }
}
.banner-slide img {
  object-fit: cover;
  object-position: center center;
}

.slot-btn {
  min-height: 3rem;
  border-radius: 0.75rem;
  border: 1px solid #e2e8f0;
  background: #fff;
  font-weight: 600;
}

label:has(input:checked) .slot-btn,
.slot-btn.is-selected {
  background: var(--brand);
  color: #fff;
  border-color: var(--brand);
}

/* hide radio but keep accessible selection via label */
.slot-radio { position: absolute; opacity: 0; pointer-events: none; }
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.line-clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}