/* ============================================================
   Boletín page — newsletter signup hero
   ============================================================ */

:root {
  --bn-accent: #E8A020;
  --bn-ink: #111827;
  --bn-text: #374151;
  --bn-muted: #6b7280;
  --bn-border: #e5e7eb;
  --bn-bg: #fafafa;
}

.bn-page {
  min-height: calc(100vh - 120px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 60px 18px 80px;
  background: var(--bn-bg);
}

.bn-card {
  width: 100%;
  max-width: 580px;
  border: 2.5px dashed var(--bn-accent);
  border-radius: 20px;
  padding: 52px 48px;
  background: rgba(232, 160, 32, 0.04);
  box-sizing: border-box;
}

/* Kicker */
.bn-kicker {
  display: block;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--bn-accent);
  margin-bottom: 14px;
}

/* Headline */
.bn-headline {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 34px;
  font-weight: 900;
  letter-spacing: -0.7px;
  line-height: 1.18;
  color: var(--bn-ink);
  margin: 0 0 18px;
}

/* Body copy */
.bn-body {
  font-size: 15px;
  line-height: 1.65;
  color: var(--bn-text);
  margin: 0 0 22px;
}

.bn-body strong {
  color: var(--bn-ink);
  font-weight: 700;
}

/* Feature badges */
.bn-badges {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 32px;
}

.bn-badge {
  font-size: 11.5px;
  font-weight: 700;
  padding: 5px 11px;
  border-radius: 20px;
  background: #f3f4f6;
  color: #4b5563;
  letter-spacing: 0.1px;
}

.bn-badge--accent {
  background: rgba(232, 160, 32, 0.13);
  color: #7a5200;
}

/* Region toggle */
.bn-toggle-label {
  display: block;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--bn-muted);
  margin-bottom: 9px;
}

.bn-region-checks {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 22px;
}

.bn-check {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--bn-muted);
  border: 1.5px solid var(--bn-border);
  border-radius: 10px;
  background: #fff;
  cursor: pointer;
  transition: background 0.14s, color 0.14s, border-color 0.14s;
  letter-spacing: 0.1px;
  line-height: 1;
}

.bn-check:has(input:checked) {
  background: var(--bn-accent);
  border-color: var(--bn-accent);
  color: #111;
}

.bn-check:not(:has(input:checked)):hover {
  background: rgba(232, 160, 32, 0.09);
  color: #374151;
}

.bn-check input {
  accent-color: var(--bn-accent);
}

/* Form */
.bn-input {
  width: 100%;
  padding: 14px 16px;
  border: 1.5px solid var(--bn-border);
  border-radius: 10px;
  font-size: 15px;
  color: var(--bn-ink);
  background: #fff;
  box-sizing: border-box;
  margin-bottom: 12px;
  transition: border-color 0.14s, box-shadow 0.14s;
}

.bn-input:focus {
  outline: none;
  border-color: var(--bn-accent);
  box-shadow: 0 0 0 3px rgba(232, 160, 32, 0.18);
}

.bn-input::placeholder {
  color: #9ca3af;
}

.bn-submit {
  width: 100%;
  padding: 14px 16px;
  border: none;
  border-radius: 10px;
  background: var(--bn-accent);
  color: #111;
  font-size: 15px;
  font-weight: 800;
  cursor: pointer;
  letter-spacing: 0.3px;
  transition: background 0.14s, transform 0.1s;
}

.bn-submit:hover {
  background: #d18f12;
}

.bn-submit:active {
  transform: scale(0.98);
}

.bn-submit:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

/* Feedback message */
.bn-msg {
  display: block;
  font-size: 13px;
  color: var(--bn-muted);
  margin-top: 10px;
  min-height: 18px;
}

/* Bottom note */
.bn-note {
  font-size: 12px;
  color: var(--bn-muted);
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--bn-border);
}

.bn-note a {
  color: var(--bn-muted);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.bn-note a:hover {
  color: var(--bn-ink);
}

/* Responsive */
@media (max-width: 620px) {
  .bn-card {
    padding: 34px 24px 30px;
  }

  .bn-headline {
    font-size: 26px;
    letter-spacing: -0.4px;
  }

  .bn-check {
    padding: 9px 16px;
    font-size: 13px;
  }
}

/* Dark mode */
.dark .bn-page {
  background: #0f1117;
}

.dark .bn-card {
  background: rgba(232, 160, 32, 0.03);
}

.dark .bn-headline {
  color: #f3f4f6;
}

.dark .bn-body {
  color: #c8ccd2;
}

.dark .bn-body strong {
  color: #f3f4f6;
}

.dark .bn-badge {
  background: #1f2937;
  color: #9ca3af;
}

.dark .bn-badge--accent {
  background: rgba(232, 160, 32, 0.1);
  color: #d4a437;
}

.dark .bn-check {
  border-color: #374151;
  background: #1a2130;
  color: #9ca3af;
}

.dark .bn-check:not(:has(input:checked)):hover {
  background: rgba(232, 160, 32, 0.08);
  color: #e5e7eb;
}

.dark .bn-input {
  background: #1f2937;
  border-color: #374151;
  color: #f3f4f6;
}

.dark .bn-input::placeholder {
  color: #6b7280;
}

.dark .bn-note {
  border-color: #2d3748;
}