[x-cloak] { display: none !important; }

body { -webkit-font-smoothing: antialiased; }

/* =====================================================================
   TOKENS
   :root      -> páginas de autenticação / site (ouro ZURI)
   .ui        -> painel e super-admin, tema claro (creme + azul-marinho)
   .ui.dark   -> painel e super-admin, tema escuro (preto + ouro)
   As paletas brand/slate do Tailwind leem as variáveis --brand-* e --slate-*.
   ===================================================================== */
:root {
  /* Ouro metálico da marca ZURI (champagne → bronze) */
  --brand-50: 250 244 232; --brand-100: 243 230 200; --brand-200: 232 200 149; --brand-300: 212 175 55; --brand-400: 201 162 39;
  --brand-500: 184 148 48; --brand-600: 157 122 42; --brand-700: 139 107 63; --brand-800: 107 80 40; --brand-900: 74 56 28;
  --bg: 0 0 0;
  --surface: 18 18 18;
  --surface-2: 28 28 28;
  --border: 58 48 32;
  --text: 245 240 230;
  --muted: 168 155 130;
  --primary: 201 162 39;
  --primary-hover: 232 200 149;
  --on-primary: 0 0 0;
  --primary-soft: 42 35 24;
  --shadow: 0 1px 2px rgba(0, 0, 0, .4);
}

.ui {
  color-scheme: light;
  --brand-50: 237 241 246; --brand-100: 221 229 239; --brand-200: 188 203 223; --brand-300: 147 169 198; --brand-400: 107 134 168;
  --brand-500: 75 103 137; --brand-600: 58 85 119; --brand-700: 47 75 110; --brand-800: 38 61 90; --brand-900: 30 48 72;
  --slate-50: 246 243 238; --slate-100: 238 234 227; --slate-200: 226 220 211; --slate-300: 204 197 187; --slate-400: 145 152 163;
  --slate-500: 104 116 132; --slate-600: 76 89 107; --slate-700: 55 70 90; --slate-800: 33 49 71; --slate-900: 22 35 54;
  --bg: 241 237 231;
  --sidebar: 241 237 231;
  --surface: 250 248 244;
  --surface-2: 244 240 234;
  --border: 230 224 215;
  --text: 31 48 71;
  --muted: 107 119 136;
  --primary: 47 75 110;
  --primary-hover: 38 61 90;
  --on-primary: 255 255 255;
  --primary-soft: 226 232 240;
  --shadow: 0 1px 2px rgba(31, 48, 71, .04), 0 10px 30px -12px rgba(31, 48, 71, .12);
  /* Paleta dos gráficos e KPIs */
  --c1: 47 75 110; --c2: 79 143 160; --c3: 107 134 179; --c4: 240 176 152; --c5: 201 122 144; --c6: 232 133 122;
  --up: 47 145 98; --down: 214 82 82;
}

.ui.dark {
  color-scheme: dark;
  --brand-50: 42 35 24; --brand-100: 58 48 32; --brand-200: 107 84 48; --brand-300: 168 132 72; --brand-400: 201 166 90;
  --brand-500: 212 175 55; --brand-600: 232 200 149; --brand-700: 232 200 149; --brand-800: 243 230 200; --brand-900: 250 244 232;
  --slate-50: 22 22 22; --slate-100: 28 28 28; --slate-200: 42 42 42; --slate-300: 64 64 64; --slate-400: 130 122 108;
  --slate-500: 168 155 130; --slate-600: 196 184 160; --slate-700: 220 210 190; --slate-800: 10 10 10; --slate-900: 0 0 0;
  --bg: 0 0 0;
  --sidebar: 8 8 8;
  --surface: 18 18 18;
  --surface-2: 28 28 28;
  --border: 58 48 32;
  --text: 245 240 230;
  --muted: 168 155 130;
  --primary: 201 162 39;
  --primary-hover: 232 200 149;
  --on-primary: 0 0 0;
  --primary-soft: 42 35 24;
  --shadow: 0 1px 2px rgba(0, 0, 0, .35), 0 12px 32px -14px rgba(0, 0, 0, .55);
  --c1: 201 162 39; --c2: 232 200 149; --c3: 139 107 63; --c4: 246 176 160; --c5: 110 211 160; --c6: 98 184 190;
  --up: 110 211 160; --down: 248 136 136;
}

.ui body { background: rgb(var(--bg)); color: rgb(var(--text)); font-family: 'Plus Jakarta Sans', ui-sans-serif, system-ui, sans-serif; }

/* =====================================================================
   COMPONENTES
   ===================================================================== */
.input {
  width: 100%;
  border: 1px solid rgb(var(--slate-200));
  border-radius: 0.7rem;
  padding: 0.55rem 0.8rem;
  font-size: 0.9rem;
  background: rgb(var(--surface));
  color: rgb(var(--text));
  transition: border-color .15s, box-shadow .15s;
}
.input::placeholder { color: rgb(var(--muted) / .7); }
.input:focus { outline: none; border-color: rgb(var(--primary)); box-shadow: 0 0 0 3px rgb(var(--primary) / .18); }
.input:disabled { background: rgb(var(--surface-2)); color: rgb(var(--muted)); }
/* Utilitários combinados com .input nas views (precisam vencer a regra acima, que carrega depois do Tailwind). */
.input.w-auto { width: auto; } .input.w-20 { width: 5rem; } .input.w-24 { width: 6rem; } .input.w-28 { width: 7rem; } .input.w-32 { width: 8rem; }
.input.py-1 { padding-top: .25rem; padding-bottom: .25rem; } .input.py-1\.5 { padding-top: .375rem; padding-bottom: .375rem; } .input.p-1 { padding: .25rem; }
.input.text-xs { font-size: .75rem; } .input.text-sm { font-size: .875rem; } .input.text-lg { font-size: 1.125rem; }
.input.h-10 { height: 2.5rem; }
@media (min-width: 640px) { .input.sm\:w-48 { width: 12rem; } .input.sm\:max-w-sm { max-width: 24rem; } }
.label { display: block; font-size: 0.8rem; font-weight: 600; color: rgb(var(--slate-600)); margin-bottom: 0.3rem; }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; border-radius: .7rem; padding: .55rem 1rem; font-size: .875rem; font-weight: 600; transition: all .15s; cursor: pointer; white-space: nowrap; }
.btn:disabled { opacity: .55; cursor: not-allowed; }
.btn-primary { background: rgb(var(--primary)); color: rgb(var(--on-primary)); }
.btn-primary:hover:not(:disabled) { background: rgb(var(--primary-hover)); }
.btn-secondary { background: rgb(var(--surface)); color: rgb(var(--slate-700)); border: 1px solid rgb(var(--slate-200)); }
.btn-secondary:hover:not(:disabled) { background: rgb(var(--surface-2)); }
.btn-danger { background: rgb(var(--surface)); color: #be123c; border: 1px solid #fecdd3; }
.btn-danger:hover:not(:disabled) { background: #fff1f2; }
.btn-success { background: #059669; color: #fff; }
.btn-success:hover:not(:disabled) { background: #047857; }
.btn-whatsapp { background: #25d366; color: #fff; }
.btn-whatsapp:hover:not(:disabled) { background: #1ebe57; }
.btn-sm { padding: .35rem .7rem; font-size: .8rem; }

.card { background: rgb(var(--surface)); border: 1px solid rgb(var(--border)); border-radius: 1.1rem; box-shadow: var(--shadow); }
.badge { display: inline-flex; align-items: center; border-radius: 999px; padding: .15rem .6rem; font-size: .72rem; font-weight: 600; }

.table { width: 100%; font-size: .875rem; }
.table th { text-align: left; font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; color: rgb(var(--muted)); font-weight: 600; padding: .65rem .9rem; background: rgb(var(--surface-2)); }
.table td { padding: .7rem .9rem; border-top: 1px solid rgb(var(--border)); vertical-align: middle; }
.table tr:hover td { background: rgb(var(--surface-2) / .6); }

.toggle { position: relative; width: 2.6rem; height: 1.45rem; border-radius: 999px; background: rgb(var(--slate-300)); transition: background .2s; flex-shrink: 0; }
.toggle::after { content: ''; position: absolute; top: .18rem; left: .2rem; width: 1.1rem; height: 1.1rem; border-radius: 999px; background: #fff; transition: transform .2s; box-shadow: 0 1px 2px rgba(0,0,0,.2); }
.toggle.on { background: rgb(var(--primary)); }
.toggle.on::after { transform: translateX(1.1rem); }

/* Menu lateral */
.sidebar { background: rgb(var(--sidebar)); border-right: 1px solid rgb(var(--border)); }

/* Painel como app (mobile): safe-area + dock inferior */
.panel-app {
  padding-top: env(safe-area-inset-top, 0);
  padding-left: env(safe-area-inset-left, 0);
  padding-right: env(safe-area-inset-right, 0);
}
.panel-app .topbar {
  padding-top: .25rem;
}
.panel-app .panel-main {
  padding-bottom: calc(5.5rem + env(safe-area-inset-bottom, 0px));
}
.app-dock {
  position: fixed;
  left: .75rem;
  right: .75rem;
  bottom: calc(.65rem + env(safe-area-inset-bottom, 0px));
  z-index: 25;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: .15rem;
  padding: .45rem .4rem;
  border-radius: 1.35rem;
  background: rgb(var(--surface) / .92);
  border: 1px solid rgb(var(--border));
  box-shadow: 0 12px 40px rgb(15 23 42 / .14);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
.ui.dark .app-dock { box-shadow: 0 12px 40px rgb(0 0 0 / .45); }
.app-dock-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .15rem;
  min-height: 3.15rem;
  border-radius: 1rem;
  color: rgb(var(--slate-500));
  font-size: .62rem;
  font-weight: 650;
  letter-spacing: .01em;
  transition: background .15s, color .15s;
  background: transparent;
  border: 0;
  cursor: pointer;
  text-decoration: none;
  padding: .2rem .15rem;
}
.app-dock-item svg { width: 1.25rem; height: 1.25rem; }
.app-dock-item.is-active {
  color: rgb(var(--brand-700));
  background: rgb(var(--brand-600) / .12);
}
.app-dock-item:active { transform: scale(.97); }
@media (min-width: 1024px) {
  .panel-app .panel-main { padding-bottom: 2rem; }
  /* app.css sobrescreve utilitários Tailwind de display — repetir lg:hidden do dock */
  .app-dock.lg\:hidden { display: none !important; }
}

/* Super-admin como app (mobile): safe-area + dock — desktop inalterado */
.admin-app {
  padding-top: env(safe-area-inset-top, 0);
  padding-left: env(safe-area-inset-left, 0);
  padding-right: env(safe-area-inset-right, 0);
  overflow-x: clip;
}
.admin-app .admin-shell,
.admin-app .admin-main {
  min-width: 0;
  max-width: 100%;
}
.admin-app .admin-main .grid > *,
.admin-app .admin-stat-grid > * {
  min-width: 0;
}
.admin-app .topbar { padding-top: .15rem; }
.admin-page-title {
  font-size: clamp(1.05rem, 4.2vw, 1.5rem);
  font-weight: 700;
  line-height: 1.2;
  color: rgb(var(--text));
}
.admin-app .admin-main {
  padding-bottom: calc(5.75rem + env(safe-area-inset-bottom, 0px));
}
.admin-app .nav-link {
  min-height: 2.75rem;
}
.admin-app .icon-btn:focus-visible,
.admin-app .nav-link:focus-visible,
.admin-app .app-dock-item:focus-visible,
.admin-app .btn:focus-visible,
.admin-app .input:focus-visible {
  outline: 2px solid rgb(var(--brand-600));
  outline-offset: 2px;
}
.admin-skeleton {
  display: grid;
  gap: 1rem;
  padding: .5rem 0 1rem;
}
.admin-skeleton-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .75rem;
}
.admin-skeleton-card {
  height: 5.5rem;
  border-radius: 1.1rem;
  background: linear-gradient(90deg, rgb(var(--surface-2)) 0%, rgb(var(--surface)) 50%, rgb(var(--surface-2)) 100%);
  background-size: 200% 100%;
  animation: admin-shimmer 1.2s ease-in-out infinite;
}
.admin-skeleton-line {
  height: 12rem;
  border-radius: 1.1rem;
  background: linear-gradient(90deg, rgb(var(--surface-2)) 0%, rgb(var(--surface)) 50%, rgb(var(--surface-2)) 100%);
  background-size: 200% 100%;
  animation: admin-shimmer 1.2s ease-in-out infinite;
}
@keyframes admin-shimmer {
  0% { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}
.admin-chip-row {
  display: flex;
  flex-wrap: nowrap;
  gap: .5rem;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-bottom: .15rem;
  margin-inline: -.15rem;
  padding-inline: .15rem;
}
.admin-chip-row::-webkit-scrollbar { display: none; }
.admin-chip-row > a,
.admin-chip-row > .badge {
  flex: 0 0 auto;
  max-width: 100%;
}
.admin-stat-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .75rem;
}
.admin-stat-card {
  padding: 1rem;
}
.admin-stat-card .admin-stat-label {
  font-size: .75rem;
  font-weight: 600;
  color: rgb(var(--slate-500));
  line-height: 1.3;
}
.admin-stat-card .admin-stat-value {
  margin-top: .35rem;
  font-size: clamp(1.15rem, 5vw, 1.5rem);
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1.15;
  word-break: break-word;
}
.admin-stat-card .admin-stat-meta {
  margin-top: .25rem;
  font-size: .7rem;
  color: rgb(var(--slate-400));
  line-height: 1.35;
}
.admin-toolbar {
  display: flex;
  flex-direction: column;
  gap: .75rem;
}
.admin-toolbar .input,
.admin-toolbar .btn {
  min-height: 2.75rem;
}
.admin-sheet-panel {
  width: 100%;
  max-width: 36rem;
  height: 100%;
  overflow-y: auto;
  background: rgb(var(--surface));
  box-shadow: var(--shadow);
}
.admin-sheet-close {
  width: 2.75rem;
  height: 2.75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  color: rgb(var(--slate-500));
  background: rgb(var(--surface-2));
  border: 0;
  font-size: 1.35rem;
  line-height: 1;
  cursor: pointer;
  transition: color .15s ease-in-out, background .15s ease-in-out;
}
.admin-sheet-close:hover { color: rgb(var(--text)); }
@media (max-width: 1023px) {
  .admin-app .table th,
  .admin-app .table td {
    padding: .7rem .75rem;
    font-size: .8125rem;
  }
  .admin-app .btn-sm {
    min-height: 2.5rem;
    padding: .45rem .85rem;
  }
  .admin-app .card > .overflow-x-auto {
    margin-inline: 0;
  }
  .admin-sheet-panel {
    max-width: none;
    border-radius: 0;
  }
}
@media (min-width: 640px) {
  .admin-toolbar {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
  }
  .admin-stat-grid { gap: 1rem; }
  .admin-stat-card { padding: 1.25rem; }
  .admin-skeleton-row { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .admin-app .admin-main { padding-bottom: 2rem; }
  .admin-chip-row {
    flex-wrap: wrap;
    overflow: visible;
  }
  .admin-stat-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
  }
}
@media (prefers-reduced-motion: reduce) {
  .admin-skeleton-card,
  .admin-skeleton-line,
  .admin-app .app-dock-item,
  .admin-app .nav-link,
  .admin-app aside {
    animation: none !important;
    transition: none !important;
  }
  .admin-app .app-dock-item:active { transform: none; }
}

.nav-link { display: flex; align-items: center; gap: .8rem; padding: .7rem .95rem; border-radius: .8rem; color: rgb(var(--slate-600)); font-size: .9rem; font-weight: 500; transition: background .15s, color .15s; }
.nav-link:hover { background: rgb(var(--surface)); color: rgb(var(--text)); }
.nav-link.active { background: rgb(var(--primary)); color: rgb(var(--on-primary)); font-weight: 600; box-shadow: 0 6px 16px -8px rgb(var(--primary) / .8); }
.nav-lock { margin-left: auto; width: 1rem; height: 1rem; opacity: .55; }

/* Abas internas das páginas (Configurações, Pacotes) */
.settings-tab { display: inline-flex; align-items: center; gap: .5rem; height: 2.5rem; padding: 0 1.1rem; border-radius: .8rem; background: rgb(var(--surface)); border: 1px solid rgb(var(--border)); color: rgb(var(--slate-600)); font-size: .875rem; font-weight: 500; box-shadow: var(--shadow); transition: background .15s, color .15s; }
.settings-tab:hover { color: rgb(var(--text)); }
.settings-tab.active { background: rgb(var(--primary)); border-color: rgb(var(--primary)); color: rgb(var(--on-primary)); font-weight: 600; }

/* Botão de lembrete pelo WhatsApp nos agendamentos da agenda */
.wa-remind { position: absolute; right: .25rem; bottom: .25rem; z-index: 5; width: 1.45rem; height: 1.45rem; border-radius: 999px; display: flex; align-items: center; justify-content: center; background: #25d366; color: #fff; box-shadow: 0 2px 6px rgba(0,0,0,.18); transition: transform .15s; }
.wa-remind:hover { transform: scale(1.12); }
.wa-remind svg { width: .85rem; height: .85rem; }
.wa-remind.sent { background: #fff; color: #16a34a; border: 1.5px solid #25d366; }
.wa-remind .wa-check { position: absolute; top: -.35rem; right: -.35rem; width: .85rem; height: .85rem; border-radius: 999px; background: #16a34a; color: #fff; font-size: .55rem; line-height: .85rem; text-align: center; font-weight: 700; }

/* Pagamento do sinal: status no painel */
.pay-badge-pending_signal { background: rgb(245 158 11 / .15); color: #b45309; }
.pay-badge-signal_paid { background: rgb(16 185 129 / .15); color: #047857; }
.pay-badge-fully_paid { background: rgb(14 165 233 / .15); color: #0369a1; }
.ui.dark .pay-badge-pending_signal { color: #fcd34d; }
.ui.dark .pay-badge-signal_paid { color: #6ee7b7; }
.ui.dark .pay-badge-fully_paid { color: #7dd3fc; }

/* Barra superior */
.topbar { background: rgb(var(--bg) / .85); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.pill { display: inline-flex; align-items: center; gap: .5rem; height: 2.5rem; padding: 0 .9rem; border-radius: .8rem; background: rgb(var(--surface)); border: 1px solid rgb(var(--border)); color: rgb(var(--text)); font-size: .85rem; font-weight: 500; box-shadow: var(--shadow); }
.icon-btn { width: 2.5rem; height: 2.5rem; display: inline-flex; align-items: center; justify-content: center; border-radius: .8rem; background: rgb(var(--surface)); border: 1px solid rgb(var(--border)); color: rgb(var(--slate-600)); box-shadow: var(--shadow); transition: color .15s; }
.icon-btn:hover { color: rgb(var(--text)); }
/* app.css carrega depois do Tailwind: utilitários responsivos de exibição precisam ser repetidos aqui. */
.pill.hidden { display: none; }
@media (min-width: 768px) { .pill.md\:inline-flex { display: inline-flex; } }
@media (min-width: 1024px) { .icon-btn.lg\:hidden { display: none; } }

/* Cartões de indicadores (KPI) */
.kpi { position: relative; overflow: hidden; border-radius: 1.1rem; padding: 1.1rem 1.15rem; background: rgb(var(--surface)); border: 1px solid rgb(var(--border)); box-shadow: var(--shadow); }
.kpi-icon { width: 2.25rem; height: 2.25rem; border-radius: .7rem; display: flex; align-items: center; justify-content: center; background: rgb(var(--kpi) / .14); color: rgb(var(--kpi)); flex-shrink: 0; }
.kpi-label { font-size: .82rem; font-weight: 600; color: rgb(var(--slate-600)); }
.kpi-value { font-size: 1.9rem; line-height: 1.1; font-weight: 700; color: rgb(var(--text)); letter-spacing: -.02em; }
.kpi-delta { font-size: .78rem; font-weight: 600; }
.kpi-delta.up { color: rgb(var(--up)); }
.kpi-delta.down { color: rgb(var(--down)); }
.kpi-delta.flat { color: rgb(var(--muted)); }
.kpi-1 { --kpi: var(--c1); } .kpi-2 { --kpi: var(--c2); } .kpi-3 { --kpi: var(--c6); } .kpi-4 { --kpi: var(--c3); } .kpi-5 { --kpi: var(--c4); }
.ui.dark .kpi { border: 0; color: #fff; }
.ui.dark .kpi-1 { background: linear-gradient(135deg, #D4AF37, #8B6B3F); }
.ui.dark .kpi-2 { background: linear-gradient(135deg, #E8C895, #A8863F); }
.ui.dark .kpi-3 { background: linear-gradient(135deg, #8B6B3F, #5C4528); }
.ui.dark .kpi-4 { background: linear-gradient(135deg, #3c9b94, #2a7c79); }
.ui.dark .kpi-5 { background: linear-gradient(135deg, #c9a227, #6B4F2A); }
.ui.dark .kpi .kpi-icon { background: rgba(255,255,255,.18); color: #fff; }
.ui.dark .kpi .kpi-label, .ui.dark .kpi .kpi-value { color: #fff; }
.ui.dark .kpi .kpi-delta { color: rgba(255,255,255,.9); }

/* Gráficos */
.chart-grid { background-image: linear-gradient(to top, rgb(var(--border)) 1px, transparent 1px); background-size: 100% 25%; }
.dot { width: .6rem; height: .6rem; border-radius: 999px; display: inline-block; flex-shrink: 0; }

/* Agenda */
.cal-grid { display: grid; }
.cal-slot { height: 48px; border-top: 1px solid rgb(var(--border)); }
.cal-event { position: absolute; left: 3px; right: 3px; border-radius: .5rem; padding: .25rem .45rem; font-size: .72rem; overflow: hidden; cursor: pointer; border-left: 4px solid; line-height: 1.2; }
.cal-event:hover { filter: brightness(.97); z-index: 5; }

.scrollbar-thin::-webkit-scrollbar { height: 6px; width: 6px; }
.scrollbar-thin::-webkit-scrollbar-thumb { background: rgb(var(--slate-200)); border-radius: 999px; }

/* =====================================================================
   SUPERFÍCIES DO PAINEL
   As views usam bg-white para cartões/modais: no painel viram a cor de
   superfície do tema. text-slate-800/900 (texto principal) segue --text.
   ===================================================================== */
.ui .bg-white { background-color: rgb(var(--surface)); }
.ui .hover\:bg-white:hover { background-color: rgb(var(--surface)); }
.ui .text-slate-800, .ui .text-slate-900 { color: rgb(var(--text)); }
.ui .bg-slate-900\/50, .ui .bg-slate-900\/40, .ui .bg-slate-900\/60 { background-color: rgb(6 13 24 / .55); }

/* Botões/etiquetas com cor da marca sólida: no escuro o coral pede texto escuro. */
.ui.dark .bg-brand-700.text-white, .ui.dark .bg-brand-600.text-white { color: rgb(var(--on-primary)); }

/* =====================================================================
   TEMA ESCURO: cores de status (selos, avisos) em versão translúcida
   ===================================================================== */
.ui.dark .bg-emerald-50, .ui.dark .bg-emerald-100 { background-color: rgb(16 185 129 / .16); }
.ui.dark .\!bg-emerald-50 { background-color: rgb(16 185 129 / .16) !important; }
.ui.dark .\!border-emerald-200 { border-color: rgb(16 185 129 / .35) !important; }
.ui.dark .bg-amber-50, .ui.dark .bg-amber-100 { background-color: rgb(245 158 11 / .16); }
.ui.dark .bg-rose-50, .ui.dark .bg-rose-100 { background-color: rgb(244 63 94 / .16); }
.ui.dark .bg-sky-100 { background-color: rgb(14 165 233 / .16); }
.ui.dark .bg-violet-100 { background-color: rgb(139 92 246 / .18); }
.ui.dark .text-emerald-600, .ui.dark .text-emerald-700, .ui.dark .text-emerald-800 { color: #6ee7b7; }
.ui.dark .text-amber-600, .ui.dark .text-amber-700, .ui.dark .text-amber-800, .ui.dark .text-amber-900 { color: #fcd34d; }
.ui.dark .text-rose-600, .ui.dark .text-rose-700, .ui.dark .text-rose-800 { color: #fda4af; }
.ui.dark .text-sky-700, .ui.dark .text-sky-800 { color: #7dd3fc; }
.ui.dark .text-violet-800 { color: #c4b5fd; }
.ui.dark .border-emerald-200 { border-color: rgb(16 185 129 / .35); }
.ui.dark .border-amber-200 { border-color: rgb(245 158 11 / .35); }
.ui.dark .border-rose-200 { border-color: rgb(244 63 94 / .35); }
.ui.dark .btn-danger { background: transparent; color: #fda4af; border-color: rgb(244 63 94 / .4); }
.ui.dark .btn-danger:hover:not(:disabled) { background: rgb(244 63 94 / .12); }
.ui.dark input[type="checkbox"], .ui.dark input[type="radio"] { accent-color: rgb(var(--primary)); }
.ui.dark select.input option { background: rgb(var(--surface)); color: rgb(var(--text)); }
.ui.dark input[type="date"].input, .ui.dark input[type="time"].input, .ui.dark input[type="month"].input { color-scheme: dark; }

/* =====================================================================
   SITE HOME / AUTH — ZURI (dark padrão + light opcional via html.zuri-light)
   ===================================================================== */
.site-home {
  --zuri-gold: #D4AF37;
  --zuri-champagne: #E8C895;
  --zuri-bronze: #8B6B3F;
  --zuri-ink: #000000;
  --zuri-surface: #121212;
  --zuri-surface-2: #1a1a1a;
  --zuri-border: rgba(232, 200, 149, .18);
  --zuri-muted: rgba(245, 240, 230, .55);
  --home-rose: var(--zuri-gold);
  --home-rose-deep: var(--zuri-champagne);
  --home-ink: #F5F0E6;
  --zuri-soft: rgba(245, 240, 230, .4);
  --zuri-body: rgba(245, 240, 230, .72);
  --zuri-link: rgba(245, 240, 230, .62);
  --zuri-link-strong: rgba(245, 240, 230, .82);
  --zuri-accent-text: var(--zuri-champagne);
  --zuri-nav-bg: rgb(0 0 0 / .72);
  --zuri-nav-scrolled-bg: rgb(0 0 0 / .9);
  --zuri-nav-shadow: 0 8px 30px rgb(0 0 0 / .45);
  --zuri-mobile-nav-bg: #050505;
  --zuri-hero-bg: #050505;
  --zuri-glass-bg: rgb(18 18 18 / .45);
  --zuri-glass-border: rgba(232, 200, 149, .22);
  --zuri-glass-shadow: 0 16px 40px rgb(0 0 0 / .35);
  --zuri-title: #F5F0E6;
  --zuri-desc: rgba(245, 240, 230, .5);
  --zuri-feature-line: rgba(232, 200, 149, .1);
  --zuri-plan-bg: #0a0a0a;
  --zuri-plan-featured-bg: linear-gradient(160deg, #1a160f 0%, #0a0a0a 55%);
  --zuri-plan-featured-ink: #F5F0E6;
  --zuri-plan-shadow: 0 24px 50px -32px rgb(0 0 0 / .7);
  --zuri-cta-bg: #050505;
  --zuri-cta-fallback: #000;
  --zuri-beam: linear-gradient(118deg, transparent 42%, rgb(232 200 149 / .05) 50%, transparent 58%);
  --zuri-beam-blend: soft-light;
  --zuri-ghost-hover-bg: rgba(232, 200, 149, .06);
  --zuri-ghost-hover-border: rgba(232, 200, 149, .45);
  --zuri-text-cta-hover: #fff;
  --zuri-demo-media: #0a0a0a;
  --zuri-demo-shadow: 0 18px 40px rgb(0 0 0 / .35);
  --zuri-demo-shadow-hover: 0 22px 48px rgb(0 0 0 / .45);
  --zuri-pill-soft-bg: rgb(0 0 0 / .55);
  --zuri-pill-soft-color: #E8C895;
  --zuri-ambient-1: rgb(212 175 55 / .14);
  --zuri-ambient-2: rgb(139 107 63 / .18);
  --zuri-ambient-3: rgb(232 200 149 / .06);
  font-family: 'Plus Jakarta Sans', ui-sans-serif, system-ui, sans-serif;
  background: var(--zuri-ink);
  color: var(--home-ink);
  overflow-x: clip;
}
html.zuri-light .site-home {
  --zuri-champagne: #C4A05A;
  --zuri-ink: #F7F3EC;
  --zuri-surface: #FFFFFF;
  --zuri-surface-2: #EFE9DF;
  --zuri-border: rgba(139, 107, 63, .2);
  --zuri-muted: rgba(28, 25, 23, .55);
  --home-ink: #1C1917;
  --zuri-soft: rgba(28, 25, 23, .4);
  --zuri-body: rgba(28, 25, 23, .72);
  --zuri-link: rgba(28, 25, 23, .58);
  --zuri-link-strong: rgba(28, 25, 23, .82);
  --zuri-accent-text: var(--zuri-bronze);
  --zuri-nav-bg: rgb(247 243 236 / .82);
  --zuri-nav-scrolled-bg: rgb(255 255 255 / .92);
  --zuri-nav-shadow: 0 8px 30px rgb(28 25 23 / .08);
  --zuri-mobile-nav-bg: #F7F3EC;
  --zuri-hero-bg: #F7F3EC;
  --zuri-glass-bg: rgb(255 255 255 / .72);
  --zuri-glass-border: rgba(139, 107, 63, .2);
  --zuri-glass-shadow: 0 16px 40px rgb(28 25 23 / .1);
  --zuri-title: #1C1917;
  --zuri-desc: rgba(28, 25, 23, .5);
  --zuri-feature-line: rgba(139, 107, 63, .12);
  --zuri-plan-bg: #FFFFFF;
  --zuri-plan-featured-bg: linear-gradient(160deg, #F5EFE3 0%, #FFFFFF 55%);
  --zuri-plan-featured-ink: #1C1917;
  --zuri-plan-shadow: 0 24px 50px -32px rgb(28 25 23 / .22);
  --zuri-cta-bg: #FAFAFA;
  --zuri-cta-fallback: #FAFAFA;
  --zuri-beam: linear-gradient(118deg, transparent 42%, rgb(212 175 55 / .08) 50%, transparent 58%);
  --zuri-beam-blend: multiply;
  --zuri-ghost-hover-bg: rgba(212, 175, 55, .08);
  --zuri-ghost-hover-border: rgba(139, 107, 63, .4);
  --zuri-text-cta-hover: var(--home-ink);
  --zuri-demo-media: #EFE9DF;
  --zuri-demo-shadow: 0 18px 40px rgb(28 25 23 / .08);
  --zuri-demo-shadow-hover: 0 22px 48px rgb(28 25 23 / .12);
  --zuri-pill-soft-bg: rgb(255 255 255 / .78);
  --zuri-pill-soft-color: #8B6B3F;
  --zuri-ambient-1: rgb(212 175 55 / .16);
  --zuri-ambient-2: rgb(139 107 63 / .1);
  --zuri-ambient-3: rgb(232 200 149 / .12);
}

.home-ambient {
  pointer-events: none;
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(ellipse 55% 40% at 88% 6%, var(--zuri-ambient-1), transparent 62%),
    radial-gradient(ellipse 45% 32% at 8% 0%, var(--zuri-ambient-2), transparent 58%),
    radial-gradient(ellipse 60% 40% at 50% 100%, var(--zuri-ambient-3), transparent 65%);
}

.site-wrap {
  width: 100%;
  max-width: 72rem;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}
@media (min-width: 640px) {
  .site-wrap { padding-left: 1.5rem; padding-right: 1.5rem; }
}

.site-logo {
  display: block;
  height: 1.65rem;
  width: auto;
  object-fit: contain;
}
.site-logo-lg {
  display: block;
  height: clamp(2.75rem, 9vw, 4.25rem);
  width: auto;
  max-width: min(100%, 26rem);
  object-fit: contain;
}
.site-logo-sm { height: 1.15rem; }

.home-nav {
  background: var(--zuri-nav-bg);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid transparent;
  transition: border-color .25s ease, box-shadow .25s ease, background .25s ease;
}
.home-nav-over {
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.home-nav.is-scrolled {
  border-bottom-color: var(--zuri-border);
  box-shadow: var(--zuri-nav-shadow);
  background: var(--zuri-nav-scrolled-bg);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
.site-link-caps {
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.site-link {
  font-size: .875rem;
  font-weight: 600;
  color: var(--zuri-link);
  transition: color .18s ease, transform .18s ease;
}
.site-link:hover, .site-link[aria-current="page"] { color: var(--zuri-accent-text); }
.site-mobile-link {
  padding: .8rem 0;
  font-size: .95rem;
  font-weight: 600;
  color: var(--zuri-link-strong);
  border-bottom: 1px solid var(--zuri-border);
}
.site-mobile-nav {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  z-index: 50;
  border-top: 1px solid var(--zuri-border);
  background: var(--zuri-mobile-nav-bg);
  box-shadow: 0 22px 40px rgb(0 0 0 / .35);
}

.site-btn,
.site-btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  border-radius: .75rem;
  padding: .7rem 1.2rem;
  font-size: .875rem;
  font-weight: 700;
  letter-spacing: -.01em;
  transition: background .18s ease, border-color .18s ease, color .18s ease, transform .18s ease, box-shadow .18s ease;
  cursor: pointer;
  white-space: nowrap;
}
.site-btn-pill { border-radius: 999px; }
.site-btn {
  background: linear-gradient(135deg, #E8C895 0%, #D4AF37 45%, #8B6B3F 100%);
  color: #000;
}
.site-btn:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
}
.site-btn-ghost {
  background: transparent;
  color: var(--home-ink);
  border: 1px solid var(--zuri-border);
}
.site-btn-ghost:hover {
  border-color: var(--zuri-ghost-hover-border);
  background: var(--zuri-ghost-hover-bg);
  transform: translateY(-1px);
}
.site-btn-sm { padding: .45rem 1rem; font-size: .75rem; }
.site-btn-lg { padding: .95rem 1.5rem; font-size: .95rem; }
.home-btn-glow {
  box-shadow: 0 10px 28px rgb(212 175 55 / .22);
}
.home-btn-glow:hover {
  box-shadow: 0 14px 34px rgb(212 175 55 / .32);
}
.site-text-cta {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-size: .925rem;
  font-weight: 700;
  color: var(--zuri-accent-text);
  transition: gap .2s ease, color .2s ease;
}
.site-text-cta:hover { gap: .65rem; color: var(--zuri-text-cta-hover); }

.site-theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 999px;
  border: 1px solid var(--zuri-border);
  color: var(--zuri-champagne);
  background: transparent;
  cursor: pointer;
  transition: background .18s ease, border-color .18s ease, color .18s ease;
}
.site-theme-toggle:hover {
  border-color: rgba(212, 175, 55, .45);
  background: rgba(212, 175, 55, .08);
}
.site-theme-toggle svg { width: 1.1rem; height: 1.1rem; }

.home-display { font-family: 'Plus Jakarta Sans', ui-sans-serif, system-ui, sans-serif; }
.home-script {
  font-family: 'Instrument Serif', Georgia, serif;
  font-style: italic;
  font-weight: 400;
  background: linear-gradient(135deg, #E8C895, #D4AF37 50%, #8B6B3F);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  letter-spacing: -.02em;
}
.home-script-sm { font-size: 1.05em; }
.home-kicker {
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--zuri-champagne);
}

/* Hero editorial — trava no primeiro viewport (100svh) */
.home-hero-editorial {
  position: relative;
  height: 100svh;
  max-height: 100svh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--zuri-hero-bg);
}
.hero-mist {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.hero-mist .spell-mist-canvas {
  display: block;
  width: 100%;
  height: 100%;
}
.hero-mist.spell-mist-fallback {
  background:
    radial-gradient(ellipse 70% 55% at 70% 35%, rgb(212 175 55 / .22), transparent 60%),
    radial-gradient(ellipse 50% 40% at 20% 70%, rgb(139 107 63 / .18), transparent 55%),
    var(--zuri-hero-bg);
}
.home-hero-editorial > .home-nav,
.home-hero-editorial > .hero-stage,
.home-hero-editorial > .hero-glass-wrap {
  position: relative;
  z-index: 2;
}
.home-hero-editorial > .home-nav {
  flex-shrink: 0;
  position: relative;
  top: auto;
  z-index: 30;
}
.home-hero-editorial .home-nav > .site-wrap {
  height: 3.5rem;
}
/* Header: ícone só no mobile; wordmark só no desktop */
.home-nav .logo-icon { display: block; }
.home-nav .logo-mark { display: none; }
@media (min-width: 640px) {
  .home-nav .logo-icon { display: none; }
  .home-nav .logo-mark { display: block; }
}
.hero-beam {
  pointer-events: none;
  position: absolute;
  inset: 0;
  z-index: 1;
  background: var(--zuri-beam);
  mix-blend-mode: var(--zuri-beam-blend);
}
.hero-stage {
  position: relative;
  z-index: 1;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: .5rem 0;
  text-align: center;
}
.hero-word {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
  width: 100%;
  max-width: min(92vw, 48rem);
  max-height: min(34svh, 12rem);
  margin: 0 auto;
  pointer-events: none;
  user-select: none;
}
.hero-word .spell-signature-svg {
  display: block;
  margin: 0 auto;
  width: 100%;
  height: auto;
  max-height: min(34svh, 12rem);
  filter: drop-shadow(0 0 24px rgb(212 175 55 / .28));
}
.hero-word .spell-sig-path {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  opacity: 0;
}
.hero-word.is-drawn .spell-sig-path {
  animation: spell-sig-draw var(--sig-duration, 2.8s) cubic-bezier(.4, 0, .2, 1) var(--sig-delay, 0s) forwards;
}
@keyframes spell-sig-draw {
  0% { stroke-dashoffset: 1; opacity: 0; }
  4% { opacity: 1; }
  100% { stroke-dashoffset: 0; opacity: 1; }
}
.hero-word.spell-signature-fallback {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(3.2rem, 12vw, 7rem);
  font-weight: 500;
  letter-spacing: -.04em;
  background: linear-gradient(135deg, #F5E0A8, #D4AF37 45%, #8B6B3F);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero-tagline {
  margin: .7rem 0 0;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(.95rem, 1.6vw, 1.2rem);
  letter-spacing: .02em;
  color: var(--zuri-link);
}
h1.hero-tagline { max-width: 28rem; }

/* FAQ da home — conteúdo alinhado ao JSON-LD */
.home-faq-item {
  border: 1px solid var(--zuri-border);
  background: var(--zuri-surface);
  border-radius: 1.15rem;
  padding: 0;
  overflow: hidden;
}
.home-faq-item summary {
  cursor: pointer;
  list-style: none;
  padding: 1rem 1.15rem;
  font-weight: 650;
  font-size: .95rem;
  color: var(--zuri-accent-text);
}
.home-faq-item summary::-webkit-details-marker { display: none; }
.home-faq-item summary::after {
  content: '+';
  float: right;
  color: var(--zuri-champagne);
  font-weight: 700;
}
.home-faq-item[open] summary::after { content: '–'; }
.home-faq-item p {
  margin: 0;
  padding: 0 1.15rem 1.1rem;
  color: var(--zuri-muted);
  font-size: .92rem;
  line-height: 1.55;
}
.site-legal h2 {
  font-size: 1.05rem;
  font-weight: 750;
  letter-spacing: -.02em;
  color: var(--zuri-accent-text);
  margin-bottom: .65rem;
}
.site-legal p + p { margin-top: .75rem; }
.hero-glass-wrap {
  position: relative;
  z-index: 4;
  flex-shrink: 0;
  padding-bottom: 1rem;
}
.hero-glass {
  display: grid;
  grid-template-columns: repeat(3, 1fr) auto;
  align-items: center;
  gap: .75rem 1rem;
  padding: .85rem 1.1rem;
  border-radius: 1.1rem;
  border: 1px solid var(--zuri-glass-border);
  background: var(--zuri-glass-bg);
  backdrop-filter: blur(18px) saturate(1.2);
  -webkit-backdrop-filter: blur(18px) saturate(1.2);
  box-shadow: var(--zuri-glass-shadow);
}
.hero-glass-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 10rem;
  padding-left: .75rem;
  border-left: 1px solid var(--zuri-border);
}
.hero-glass-cta .site-btn {
  width: 100%;
}
.hero-glass-item {
  display: flex;
  align-items: flex-start;
  gap: .55rem;
  min-width: 0;
}
.hero-glass-icon {
  width: 1.2rem;
  height: 1.2rem;
  flex-shrink: 0;
  color: var(--zuri-champagne);
  margin-top: .1rem;
}
.hero-glass-title {
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--zuri-title);
}
.hero-glass-desc {
  margin-top: .1rem;
  font-size: .68rem;
  color: var(--zuri-desc);
  line-height: 1.25;
}
.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;
}
@media (max-width: 1023px) {
  .hero-glass {
    grid-template-columns: 1fr 1fr;
  }
  .hero-glass-cta {
    grid-column: 1 / -1;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    border-left: 0;
    border-top: 1px solid var(--zuri-border);
    padding: .65rem 0 0;
    min-width: 0;
  }
  .hero-word,
  .hero-word .spell-signature-svg {
    max-height: min(28svh, 10rem);
    max-width: min(90vw, 42rem);
  }
}
@media (max-width: 767px) {
  .home-hero-editorial {
    height: 100svh;
    max-height: 100svh;
  }
  .hero-glass-wrap { padding-bottom: .75rem; }
  .hero-glass {
    grid-template-columns: 1fr 1fr;
    gap: .55rem .75rem;
    padding: .9rem 1rem;
    border-radius: 1.75rem;
  }
  .hero-glass-desc { display: none; }
  .hero-word,
  .hero-word .spell-signature-svg {
    max-height: min(24svh, 8rem);
    max-width: min(92vw, 22rem);
  }
  .site-btn:not(.site-btn-pill) { border-radius: 1.15rem; }
  .site-theme-toggle { width: 2.5rem; height: 2.5rem; }
}

/* Logos Carousel (Spell UI) — faixa sob o hero */
.home-ticker {
  border-block: 1px solid var(--zuri-border);
  background: transparent;
  overflow: hidden;
  padding: 1.75rem 0;
}
.spell-logos {
  width: 100%;
  max-width: 74rem;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}
.spell-logos-stage {
  display: grid;
  place-items: center;
  width: 100%;
  min-height: 3rem;
}
.spell-logos-group {
  grid-area: 1 / 1;
  display: flex;
  width: 100%;
  justify-content: center;
  align-items: center;
  gap: 2.5rem;
}
.spell-logos-item {
  flex: 1 1 0;
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 14rem;
}
.spell-logos-label {
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--zuri-muted);
  white-space: nowrap;
  text-align: center;
}
.spell-logos-item.is-idle-out { opacity: 0; }
.spell-logos-item.is-idle-in { opacity: 1; }
.spell-logos-item.is-enter {
  animation-name: spell-logos-enter;
}
.spell-logos-item.is-exit {
  animation-name: spell-logos-exit;
}
@keyframes spell-logos-enter {
  0% { transform: translateY(40px); filter: blur(4px); opacity: 0; }
  100% { transform: translateY(0); filter: blur(0); opacity: 1; }
}
@keyframes spell-logos-exit {
  0% { transform: translateY(0); filter: blur(0); opacity: 1; }
  100% { transform: translateY(-40px); filter: blur(4px); opacity: 0; }
}
@media (max-width: 900px) {
  .spell-logos-group { gap: 1.25rem; }
  .spell-logos-label { font-size: .68rem; letter-spacing: .1em; }
}
@media (max-width: 640px) {
  .spell-logos-group {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem .75rem;
  }
  .spell-logos-item { max-width: none; }
  .spell-logos-label { font-size: .62rem; white-space: normal; line-height: 1.25; }
}

/* Recursos — faixas editoriais (sem bento/cards) */
.home-features {
  padding: 4.5rem 0 2rem;
}
.home-features-intro {
  max-width: 40rem;
  margin-bottom: 3.5rem;
}
.home-features-title {
  margin-top: .85rem;
  font-size: clamp(2rem, 4.5vw, 3.1rem);
  font-weight: 800;
  letter-spacing: -.035em;
  line-height: 1.1;
}
.home-feature {
  padding: 3.25rem 0;
}
.home-feature + .home-feature {
  border-top: 1px solid var(--zuri-feature-line);
}
.home-feature-grid {
  display: grid;
  gap: 2rem;
  align-items: center;
}
.home-feature-copy { max-width: 28rem; }
.home-feature-heading {
  margin-top: .85rem;
  font-size: clamp(1.65rem, 3vw, 2.35rem);
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: 1.15;
  color: var(--zuri-title);
}
.home-feature-text {
  margin-top: 1rem;
  font-size: 1.05rem;
  line-height: 1.65;
  color: var(--zuri-muted);
}
.home-feature-cta {
  justify-self: start;
  margin-top: .35rem;
}
.home-feature-media {
  margin: 0;
  overflow: hidden;
  border-radius: 1.25rem;
}
.home-feature-media img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  filter: saturate(.92) contrast(1.04);
  border-radius: inherit;
}
@media (min-width: 900px) {
  .home-features { padding: 6rem 0 3rem; }
  .home-features-intro { margin-bottom: 5rem; }
  .home-feature { padding: 4.5rem 0; }
  .home-feature-grid {
    grid-template-columns: 1fr 1.15fr;
    gap: 4rem;
  }
  .home-feature-flip .home-feature-copy { order: 2; }
  .home-feature-flip .home-feature-media { order: 1; }
  .home-feature-grid:has(.home-feature-cta) .home-feature-media {
    grid-column: 2;
    grid-row: 1 / span 2;
  }
  .home-feature-grid:has(.home-feature-cta) .home-feature-cta {
    grid-column: 1;
    grid-row: 2;
    align-self: start;
    margin-top: 1.75rem;
  }
}

/* Plans */
.home-plans-band {
  background: var(--zuri-surface);
  border-block: 1px solid var(--zuri-border);
}
.home-plan {
  position: relative;
  display: flex; flex-direction: column;
  background: var(--zuri-plan-bg);
  border: 1px solid var(--zuri-border);
  border-radius: 1.5rem;
  padding: 1.85rem 1.55rem;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  color: var(--home-ink);
}
.home-plan:hover {
  transform: translateY(-4px);
  box-shadow: var(--zuri-plan-shadow);
  border-color: rgba(232, 200, 149, .35);
}
.home-plan.is-featured {
  background: var(--zuri-plan-featured-bg);
  color: var(--zuri-plan-featured-ink);
  border-color: rgba(212, 175, 55, .55);
  box-shadow: 0 28px 60px -28px rgb(212 175 55 / .28);
}
.home-plan.is-featured .site-btn-ghost {
  background: transparent;
  color: var(--zuri-plan-featured-ink);
  border-color: rgba(232, 200, 149, .35);
}
.home-plan-badge {
  position: absolute; top: -.75rem; left: 50%; transform: translateX(-50%);
  background: linear-gradient(135deg, #E8C895, #D4AF37);
  color: #000;
  font-size: .65rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  padding: .35rem .75rem; border-radius: 999px;
  box-shadow: 0 8px 20px rgb(212 175 55 / .35);
}

/* Final CTA — Spell UI Plasma */
.home-cta {
  position: relative;
  overflow: hidden;
  text-align: center;
  background: var(--zuri-cta-bg);
  border: 1px solid var(--zuri-border);
  border-radius: 2rem;
  padding: 3.5rem 1.5rem;
  isolation: isolate;
}
.home-cta-plasma {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  border-radius: inherit;
}
.home-cta-plasma .spell-mist-canvas {
  display: block;
  width: 100%;
  height: 100%;
}
.home-cta-plasma.spell-mist-fallback {
  background:
    radial-gradient(ellipse 70% 60% at 30% 40%, rgb(212 175 55 / .35), transparent 55%),
    radial-gradient(ellipse 55% 50% at 75% 70%, rgb(232 200 149 / .2), transparent 50%),
    var(--zuri-cta-fallback);
}
.home-cta > :not(.home-cta-plasma) {
  position: relative;
  z-index: 1;
}
.home-cta .site-btn.site-btn-on-dark {
  background: linear-gradient(135deg, #E8C895, #D4AF37);
  color: #000;
}
.home-cta .site-btn.site-btn-on-dark:hover { filter: brightness(1.06); }

/* Reveal */
[data-reveal] {
  opacity: 0;
  transform: translate3d(0, 28px, 0);
  transition: opacity .8s cubic-bezier(.22, 1, .36, 1), transform .8s cubic-bezier(.22, 1, .36, 1);
}
[data-reveal].is-in { opacity: 1; transform: none; }

@media (max-width: 767px) {
  .home-feature-media,
  .home-feature-media img { border-radius: 1.75rem; }
  .home-plan {
    border-radius: 1.85rem;
    padding: 1.7rem 1.35rem;
  }
  .home-cta { border-radius: 2rem; padding: 2.5rem 1.25rem; }
  .demo-card { border-radius: 1.85rem; }
  .demo-card-media { border-radius: 1.85rem 1.85rem 0 0; }
  .auth-shell { padding: 1.25rem 1rem 2rem; }
  .auth-shell .card { border-radius: 1.75rem; }
  .auth-shell .input,
  .auth-shell .btn-primary,
  .auth-shell .btn-secondary { border-radius: 1rem; }
}

@media (prefers-reduced-motion: reduce) {
  .spell-logos-item { animation: none !important; filter: none !important; opacity: 1 !important; transform: none !important; }
  [data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* Página /demo — vitrine de modelos */
.demo-card {
  display: flex;
  flex-direction: column;
  border-radius: 1.35rem;
  border: 1px solid var(--zuri-border);
  background: var(--zuri-surface);
  overflow: hidden;
  box-shadow: var(--zuri-demo-shadow);
  transition: transform .35s cubic-bezier(.22, 1, .36, 1), box-shadow .35s ease, border-color .25s ease;
  isolation: isolate;
}
.demo-card:hover {
  transform: translateY(-6px) scale(1.01);
  border-color: rgba(232, 200, 149, .4);
  box-shadow: var(--zuri-demo-shadow-hover), 0 24px 48px -28px rgba(212, 175, 55, .28);
}
.demo-card-media {
  position: relative;
  aspect-ratio: 16 / 10;
  background: var(--zuri-demo-media);
  overflow: hidden;
}
.demo-card-media::after {
  content: '';
  position: absolute;
  inset: -40% -60%;
  background: linear-gradient(115deg, transparent 38%, rgba(255, 255, 255, .22) 50%, transparent 62%);
  transform: translateX(-45%) rotate(8deg);
  transition: transform .9s cubic-bezier(.22, 1, .36, 1);
  pointer-events: none;
  z-index: 2;
}
.demo-card:hover .demo-card-media::after {
  transform: translateX(40%) rotate(8deg);
}
.demo-card-media img {
  transition: transform .7s cubic-bezier(.16, 1, .3, 1), filter .45s ease;
}
.demo-card:hover .demo-card-media img {
  transform: scale(1.06);
  filter: saturate(1.05) contrast(1.02);
}
.demo-pill {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: .28rem .7rem;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  background: linear-gradient(135deg, #E8C895, #D4AF37);
  color: #000;
  box-shadow: 0 4px 14px rgb(0 0 0 / .35);
}
.demo-pill-soft {
  background: var(--zuri-pill-soft-bg);
  color: var(--zuri-pill-soft-color);
  backdrop-filter: blur(8px);
}

/* Auth ZURI — dark padrão */
.auth-shell {
  --zuri-champagne: #E8C895;
  --zuri-bronze: #8B6B3F;
  --zuri-border: rgba(232, 200, 149, .18);
  --auth-ink: #F5F0E6;
  --auth-muted: rgba(245, 240, 230, .55);
  --auth-label: rgba(245, 240, 230, .7);
  --auth-bg: #000;
  --auth-card: #121212;
  --auth-input: #0a0a0a;
  --auth-input-border: rgba(232, 200, 149, .22);
  --auth-link: #E8C895;
  --auth-secondary-bg: #0a0a0a;
  --auth-secondary-hover: #1a1a1a;
  --auth-shadow: 0 24px 60px rgb(0 0 0 / .55);
  --auth-ambient-1: rgb(212 175 55 / .12);
  --auth-ambient-2: rgb(139 107 63 / .16);
  --auth-rose-text: #fca5a5;
  --auth-rose-bg: rgb(244 63 94 / .14);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background:
    radial-gradient(ellipse 50% 40% at 80% 0%, var(--auth-ambient-1), transparent 55%),
    radial-gradient(ellipse 40% 35% at 10% 100%, var(--auth-ambient-2), transparent 55%),
    var(--auth-bg);
  color: var(--auth-ink);
  position: relative;
}
html.zuri-light .auth-shell {
  --zuri-champagne: #C4A05A;
  --zuri-border: rgba(139, 107, 63, .2);
  --auth-ink: #1C1917;
  --auth-muted: rgba(28, 25, 23, .55);
  --auth-label: rgba(28, 25, 23, .7);
  --auth-bg: #F7F3EC;
  --auth-card: #FFFFFF;
  --auth-input: #F7F3EC;
  --auth-input-border: rgba(139, 107, 63, .22);
  --auth-link: #8B6B3F;
  --auth-secondary-bg: #F7F3EC;
  --auth-secondary-hover: #EFE9DF;
  --auth-shadow: 0 24px 60px rgb(28 25 23 / .1);
  --auth-ambient-1: rgb(212 175 55 / .18);
  --auth-ambient-2: rgb(139 107 63 / .1);
  --auth-rose-text: #b91c1c;
  --auth-rose-bg: rgb(254 226 226);
}
.auth-shell .site-theme-toggle {
  position: absolute;
  top: 1rem;
  right: 1rem;
  color: var(--zuri-champagne);
  border-color: var(--zuri-border);
}
.auth-shell .card {
  background: var(--auth-card);
  border: 1px solid var(--zuri-border);
  border-radius: 1.25rem;
  color: var(--auth-ink);
  box-shadow: var(--auth-shadow);
}
.auth-shell .label { color: var(--auth-label); }
.auth-shell .input {
  background: var(--auth-input);
  border-color: var(--auth-input-border);
  color: var(--auth-ink);
}
.auth-shell .input:focus {
  border-color: #D4AF37;
  box-shadow: 0 0 0 3px rgb(212 175 55 / .22);
}
.auth-shell .btn-primary {
  background: linear-gradient(135deg, #E8C895, #D4AF37 50%, #8B6B3F);
  color: #140f08;
  -webkit-text-fill-color: #140f08;
  background-clip: padding-box;
  border: 0;
  min-height: 3rem;
  font-weight: 700;
}
.auth-shell select.input {
  color-scheme: dark;
}
html.zuri-light .auth-shell select.input {
  color-scheme: light;
}
.auth-shell select.input option {
  background: var(--auth-card);
  color: var(--auth-ink);
}
.auth-shell .btn-primary:hover:not(:disabled) {
  filter: brightness(1.06);
  background: linear-gradient(135deg, #E8C895, #D4AF37 50%, #8B6B3F);
}
.auth-shell a { color: var(--auth-link); }
.auth-shell .text-slate-500, .auth-shell .text-slate-400 { color: var(--auth-muted) !important; }
.auth-shell .text-brand-700 { color: var(--auth-link) !important; }
.auth-shell .text-rose-600 { color: var(--auth-rose-text) !important; }
.auth-shell .bg-rose-50 { background: var(--auth-rose-bg) !important; }
.auth-shell .border-slate-200 { border-color: var(--auth-input-border) !important; }
.auth-shell .bg-white { background: var(--auth-card) !important; }
.auth-shell .btn-secondary {
  background: var(--auth-secondary-bg);
  border: 1px solid rgba(232, 200, 149, .25);
  color: var(--auth-ink);
}
html.zuri-light .auth-shell .btn-secondary {
  border-color: rgba(139, 107, 63, .25);
}
.auth-shell .btn-secondary:hover:not(:disabled) {
  background: var(--auth-secondary-hover);
  border-color: rgba(232, 200, 149, .4);
}
html.zuri-light .auth-shell .btn-secondary:hover:not(:disabled) {
  border-color: rgba(139, 107, 63, .4);
}

/* Tutorial guiado do painel */
.ba-tour-open { overflow: hidden; }
.ba-tour { position: fixed; inset: 0; z-index: 80; pointer-events: none; }
.ba-tour-overlay {
  position: absolute; inset: 0;
  background: transparent;
  pointer-events: auto;
}
.ba-tour-spotlight {
  position: absolute;
  border-radius: .9rem;
  box-shadow: 0 0 0 9999px rgb(15 23 42 / .58);
  outline: 2px solid rgb(var(--brand-600));
  outline-offset: 2px;
  pointer-events: none;
  transition: top .2s ease, left .2s ease, width .2s ease, height .2s ease;
  z-index: 1;
  background: transparent;
}
.ba-tour-card {
  position: absolute;
  z-index: 2;
  width: min(22rem, calc(100vw - 2rem));
  background: rgb(var(--surface));
  color: rgb(var(--text));
  border: 1px solid rgb(var(--border));
  border-radius: 1rem;
  box-shadow: 0 18px 50px rgb(0 0 0 / .22);
  padding: 1rem 1.1rem 1.05rem;
  pointer-events: auto;
}
.ba-tour-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: .75rem; }
.ba-tour-kicker {
  margin: 0;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: rgb(var(--brand-700));
}
.ba-tour-close {
  width: 1.75rem; height: 1.75rem;
  border-radius: .5rem;
  border: 0;
  background: transparent;
  color: rgb(var(--slate-500));
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
}
.ba-tour-close:hover { background: rgb(var(--surface-2)); color: rgb(var(--text)); }
.ba-tour-title { margin: .45rem 0 0; font-size: 1.1rem; font-weight: 700; letter-spacing: -.01em; }
.ba-tour-body { margin: .45rem 0 0; font-size: .9rem; line-height: 1.45; color: rgb(var(--slate-600)); }
.ba-tour-foot {
  display: flex; align-items: center; justify-content: space-between; gap: .75rem;
  margin-top: 1rem; padding-top: .85rem; border-top: 1px solid rgb(var(--border));
}
.ba-tour-progress { font-size: .75rem; color: rgb(var(--slate-400)); font-weight: 600; }
.ba-tour-actions { display: flex; gap: .4rem; }
.ui.dark .ba-tour-spotlight { box-shadow: 0 0 0 9999px rgb(0 0 0 / .7); }