:root {
  --color-samba: #FF5A3C;
  --color-samba-text: #C03214;
  --color-samba-hover: #FF7A5E;
  --color-mar: #0E7C66;
  --color-sol: #FFC53D;
  --color-sol-600: #D99700;
  --color-ink: #171614;
  --color-muted: #6B6B6B;
  --color-line: #E7E5E1;
  --color-surface: #F6F5F2;
  --color-bg: #FFFFFF;
  --color-success: #16A34A;
  --color-warning: #F59E0B;
  --color-error: #DC2626;

  --font-display: "Sora", system-ui, sans-serif;
  --font-body: "Inter", system-ui, sans-serif;

  --radius-btn: 12px;
  --radius-card: 16px;
  --radius-pill: 999px;
  --radius-sheet: 24px;

  --space-1: 4px; --space-2: 8px; --space-3: 12px;
  --space-4: 16px; --space-6: 24px; --space-8: 32px; --space-12: 48px;

  --shadow-card: 0 1px 2px rgba(0,0,0,.06);
  --shadow-float: 0 8px 24px rgba(0,0,0,.10);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-body);
  color: var(--color-ink);
  background: var(--color-bg);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 700; margin: 0 0 var(--space-3); }
p { margin: 0 0 var(--space-3); color: var(--color-ink); }
a { color: var(--color-mar); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; display: block; }
:focus-visible { outline: 3px solid var(--color-mar); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

.shell { max-width: 1180px; margin: 0 auto; padding: 0 var(--space-4); }
.beta-flag {
  background: var(--color-ink); color: #fff; text-align: center;
  font-size: 13px; padding: 6px var(--space-3); font-family: var(--font-body);
}
.beta-flag strong { color: var(--color-sol); }

/* ---------- header ---------- */
.site-header { border-bottom: 1px solid var(--color-line); background: var(--color-bg); position: sticky; top: 0; z-index: 20; }
.header-inner { max-width: 1180px; margin: 0 auto; padding: var(--space-3) var(--space-4); display: flex; align-items: center; gap: var(--space-6); }
.logo { font-family: var(--font-display); font-weight: 700; font-size: 20px; color: var(--color-samba-text); }
.header-nav { display: flex; gap: var(--space-4); flex: 1; }
.nav-link { color: var(--color-ink); font-weight: 600; font-size: 14px; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; }
.nav-link:hover { text-decoration: none; color: var(--color-samba-text); }
.nav-link.is-active { color: var(--color-samba-text); }
.header-actions { display: flex; gap: var(--space-2); align-items: center; }
.icon-btn {
  min-height: 44px; min-width: 44px; padding: 0 var(--space-3); border-radius: var(--radius-pill);
  border: 1px solid var(--color-line); background: var(--color-bg); font-family: var(--font-body);
  font-size: 13px; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; gap: 6px;
}
.icon-btn:hover { border-color: var(--color-mar); }

/* ---------- buttons ---------- */
.btn {
  font-family: var(--font-body); font-weight: 600; border-radius: var(--radius-btn); border: none;
  cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 0 var(--space-4); font-size: 15px; text-decoration: none;
}
.btn-lg { min-height: 52px; padding: 0 var(--space-6); font-size: 16px; }
.btn-sm { min-height: 44px; padding: 0 var(--space-3); font-size: 13px; }
.btn-primary { background: var(--color-samba); color: var(--color-ink); }
.btn-primary:hover { background: var(--color-samba-hover); }
.btn-secondary { background: var(--color-bg); color: var(--color-mar); border: 1.5px solid var(--color-mar); }
.btn-secondary:hover { background: var(--color-surface); }
.btn-ghost { background: transparent; color: var(--color-ink); border: 1.5px solid var(--color-line); }
.btn-ghost:hover { border-color: var(--color-ink); }
.btn-danger { background: var(--color-error); color: #fff; }

/* ---------- chips / badges ---------- */
.chip {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--space-4);
  border-radius: var(--radius-pill); border: 1.5px solid var(--color-line); background: var(--color-bg);
  font-size: 14px; font-weight: 600; cursor: pointer;
}
.chip.is-selected { background: var(--color-ink); color: #fff; border-color: var(--color-ink); }
.badge { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 700; padding: 3px 10px; border-radius: var(--radius-pill); }
.badge-success { background: #DCFCE7; color: #14532D; }
.badge-warning { background: #FEF3C7; color: #7C4A03; }
.badge-error { background: #FEE2E2; color: #7F1D1D; }
.badge-neutral { background: var(--color-surface); color: var(--color-muted); }
.badge-info { background: #E0F2EE; color: var(--color-mar); }

/* ---------- cards ---------- */
.card { background: var(--color-bg); border: 1px solid var(--color-line); border-radius: var(--radius-card); box-shadow: var(--shadow-card); }
.card-pad { padding: var(--space-6); }

/* ---------- footer ---------- */
.site-footer { border-top: 1px solid var(--color-line); margin-top: var(--space-12); padding: var(--space-8) 0; color: var(--color-muted); font-size: 13px; }

/* ---------- hub (index) ---------- */
.hub-hero { padding: var(--space-12) 0 var(--space-8); text-align: center; }
.hub-hero h1 { font-size: clamp(28px, 5vw, 42px); }
.hub-hero p { color: var(--color-muted); font-size: 17px; max-width: 560px; margin: 0 auto var(--space-4); }
.hub-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-4); padding-bottom: var(--space-12); }
@media (max-width: 900px) { .hub-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .hub-grid { grid-template-columns: 1fr; } }
.hub-card { padding: var(--space-6); display: flex; flex-direction: column; gap: var(--space-2); }
.hub-card .hub-icon { font-size: 28px; }
.hub-card h3 { font-size: 18px; margin-bottom: 0; }
.hub-card p { font-size: 14px; color: var(--color-muted); margin-bottom: var(--space-3); }
.hub-card .btn { align-self: flex-start; }

/* ---------- blog ---------- */
.section-head { display: flex; align-items: baseline; justify-content: space-between; margin: var(--space-8) 0 var(--space-4); }
.section-head h2 { font-size: 22px; margin-bottom: 0; }
.article-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); }
@media (max-width: 900px) { .article-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .article-grid { grid-template-columns: 1fr; } }
.article-card { overflow: hidden; }
.article-card .cover { aspect-ratio: 16/9; background: var(--color-surface); display: flex; align-items: center; justify-content: center; font-size: 36px; }
.article-card .body { padding: var(--space-4); }
.article-card .cat { color: var(--color-samba-text); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.article-card h3 { font-size: 17px; margin: var(--space-2) 0; }
.article-card .meta { color: var(--color-muted); font-size: 13px; }
.article-body { max-width: 680px; margin: 0 auto; font-size: 17px; }
.article-body .cover-hero { aspect-ratio: 16/7; background: var(--color-surface); border-radius: var(--radius-card); display: flex; align-items: center; justify-content: center; font-size: 56px; margin-bottom: var(--space-6); }

/* ---------- hospedagem (packages) ---------- */
.filters-bar { display: flex; gap: var(--space-2); flex-wrap: wrap; padding: var(--space-4) 0; border-bottom: 1px solid var(--color-line); margin-bottom: var(--space-6); }
.package-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); padding-bottom: var(--space-12); }
@media (max-width: 900px) { .package-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .package-grid { grid-template-columns: 1fr; } }
.package-card { overflow: hidden; position: relative; }
.package-card .cover { aspect-ratio: 4/3; background: linear-gradient(135deg, var(--color-mar), #0a5f4f); display: flex; align-items: center; justify-content: center; font-size: 40px; color: #fff; position: relative; }
.package-card .cover .promo-badge { position: absolute; top: var(--space-3); left: var(--space-3); background: var(--color-sol); color: var(--color-ink); font-size: 12px; font-weight: 700; padding: 4px 10px; border-radius: var(--radius-pill); }
.package-card .body { padding: var(--space-4); }
.package-card .type { color: var(--color-muted); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.package-card h3 { font-size: 16px; margin: var(--space-1) 0 var(--space-2); }
.package-card .rating { font-size: 13px; color: var(--color-ink); font-weight: 600; }
.package-card .rating .stars { color: var(--color-sol-600); }
.package-card .price { margin-top: var(--space-3); display: flex; align-items: baseline; justify-content: space-between; }
.package-card .price .from { font-size: 12px; color: var(--color-muted); display: block; }
.package-card .price .amount { font-family: var(--font-display); font-size: 20px; font-weight: 700; }
.cancel-free { color: var(--color-success); font-size: 12px; font-weight: 700; }

/* ---------- forms ---------- */
.form-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-4); }
@media (max-width: 640px) { .form-grid { grid-template-columns: 1fr; } }
.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: var(--space-4); }
.field.full { grid-column: 1 / -1; }
.field label { font-size: 13px; font-weight: 700; color: var(--color-ink); }
.field .hint { font-size: 12px; color: var(--color-muted); }
.field input, .field select, .field textarea {
  min-height: 44px; border: 1.5px solid var(--color-line); border-radius: var(--radius-btn);
  padding: 0 var(--space-3); font-family: var(--font-body); font-size: 15px; background: var(--color-bg); color: var(--color-ink);
}
.field textarea { min-height: 110px; padding: var(--space-3); resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--color-mar); }
.upload-box {
  border: 1.5px dashed var(--color-line); border-radius: var(--radius-card); padding: var(--space-6);
  text-align: center; color: var(--color-muted); font-size: 14px; background: var(--color-surface);
}

/* ---------- tables ---------- */
.table-wrap { overflow-x: auto; border: 1px solid var(--color-line); border-radius: var(--radius-card); }
table.data-table { width: 100%; border-collapse: collapse; font-size: 14px; }
table.data-table th { text-align: left; background: var(--color-surface); color: var(--color-muted); font-size: 12px; text-transform: uppercase; letter-spacing: .03em; padding: var(--space-3) var(--space-4); font-weight: 700; }
table.data-table td { padding: var(--space-3) var(--space-4); border-top: 1px solid var(--color-line); vertical-align: middle; }
table.data-table tr:hover td { background: var(--color-surface); }

/* ---------- admin shell ---------- */
.admin-shell { display: flex; min-height: 100vh; }
.admin-sidebar { width: 240px; flex: none; background: var(--color-ink); color: #fff; padding: var(--space-6) var(--space-4); }
.admin-sidebar .logo { color: var(--color-sol); display: block; margin-bottom: var(--space-8); font-size: 18px; }
.admin-sidebar nav a {
  display: flex; align-items: center; gap: 10px; color: #E7E5E1; font-weight: 600; font-size: 14px;
  padding: var(--space-3) var(--space-3); border-radius: var(--radius-btn); min-height: 44px; margin-bottom: 4px;
}
.admin-sidebar nav a:hover { background: rgba(255,255,255,.08); text-decoration: none; }
.admin-sidebar nav a.is-active { background: var(--color-samba); color: var(--color-ink); }
.admin-sidebar .back { color: #A8A6A2; font-size: 13px; margin-top: var(--space-8); display: block; }
.admin-main { flex: 1; background: var(--color-surface); min-width: 0; }
.admin-topbar { background: var(--color-bg); border-bottom: 1px solid var(--color-line); padding: var(--space-4) var(--space-8); display: flex; align-items: center; justify-content: space-between; }
.admin-topbar h1 { font-size: 20px; margin: 0; }
.admin-content { padding: var(--space-8); }
@media (max-width: 860px) {
  .admin-shell { flex-direction: column; }
  .admin-sidebar { width: 100%; padding: var(--space-4); }
  .admin-sidebar nav { display: flex; overflow-x: auto; gap: 4px; }
  .admin-sidebar .back { display: none; }
  .admin-content { padding: var(--space-4); }
  .admin-topbar { padding: var(--space-4); }
}

/* ---------- KPIs ---------- */
.kpi-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-4); margin-bottom: var(--space-8); }
@media (max-width: 860px) { .kpi-grid { grid-template-columns: repeat(2, 1fr); } }
.kpi-card { padding: var(--space-4) var(--space-6); }
.kpi-card .label { font-size: 13px; color: var(--color-muted); font-weight: 600; }
.kpi-card .value { font-family: var(--font-display); font-size: 28px; font-weight: 700; margin: 4px 0; }
.kpi-card .delta { font-size: 12px; font-weight: 700; }
.kpi-card .delta.up { color: var(--color-success); }
.kpi-card .delta.down { color: var(--color-error); }

/* ---------- pipeline / kanban-lite ---------- */
.pipeline { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-4); margin-bottom: var(--space-8); }
@media (max-width: 860px) { .pipeline { grid-template-columns: 1fr; } }
.pipeline-col { background: var(--color-bg); border: 1px solid var(--color-line); border-radius: var(--radius-card); padding: var(--space-3); }
.pipeline-col h4 { font-size: 13px; text-transform: uppercase; letter-spacing: .03em; color: var(--color-muted); margin-bottom: var(--space-3); display: flex; justify-content: space-between; }
.pipeline-card { background: var(--color-surface); border-radius: var(--radius-btn); padding: var(--space-3); margin-bottom: var(--space-2); font-size: 13px; }
.pipeline-card strong { display: block; font-size: 14px; margin-bottom: 2px; }
.pipeline-card .muted { color: var(--color-muted); }

/* ---------- toolbar ---------- */
.toolbar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-6); flex-wrap: wrap; }
.toolbar h2 { margin: 0; font-size: 20px; }
.search-input { min-height: 44px; border: 1.5px solid var(--color-line); border-radius: var(--radius-pill); padding: 0 var(--space-4); font-size: 14px; min-width: 220px; }