/* =========================================================
   ON CONVITE — Design System
   Paleta: roxo/azul, gradientes, visual premium e acessível
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800&family=Inter:wght@400;500;600&family=Playfair+Display:wght@600;700;800&family=Baloo+2:wght@500;600;700;800&family=Quicksand:wght@500;600;700&family=Pacifico&family=Fredoka:wght@400;500;600;700&family=Chewy&family=Bubblegum+Sans&family=Luckiest+Guy&family=Caveat:wght@500;600;700&family=Amatic+SC:wght@400;700&family=Comfortaa:wght@500;600;700&family=Bangers&family=Fredericka+the+Great&family=Gochi+Hand&display=swap');

:root{
  --roxo: #6C3CE9;
  --roxo-escuro: #4B22B8;
  --azul: #2F6BFF;
  --azul-claro: #E8ECFF;
  --gradiente: linear-gradient(135deg, #6C3CE9 0%, #2F6BFF 100%);
  --texto: #1E1B2E;
  --texto-suave: #6B6580;
  --branco: #FFFFFF;
  --fundo: #F7F6FC;
  --borda: #E7E4F4;
  --sucesso: #1FAA59;
  --sucesso-bg: #E8F8EE;
  --alerta: #E0A200;
  --alerta-bg: #FEF6E5;
  --erro: #E3405A;
  --erro-bg: #FDEAEC;
  --raio: 16px;
  --raio-sm: 10px;
  --sombra: 0 8px 30px rgba(76, 40, 180, 0.10);
  --sombra-sm: 0 2px 10px rgba(76, 40, 180, 0.08);
}

*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; overflow-x:hidden; }
body{
  margin:0;
  font-family:'Inter', 'Poppins', sans-serif;
  color: var(--texto);
  background: var(--fundo);
  -webkit-font-smoothing: antialiased;
  overflow-x:hidden;
}
h1,h2,h3,h4{ font-family:'Poppins', sans-serif; margin:0 0 12px; line-height:1.2; }
p{ margin:0 0 16px; color: var(--texto-suave); }
a{ text-decoration:none; color: inherit; }
img{ max-width:100%; display:block; }
ul{ list-style:none; margin:0; padding:0; }
button{ font-family:inherit; cursor:pointer; }
.container{ width:100%; max-width:1180px; margin:0 auto; padding:0 24px; }

/* ---------- Marca ---------- */
.logo{ display:inline-flex; align-items:baseline; gap:2px; font-family:'Poppins',sans-serif; font-weight:800; font-size:26px; letter-spacing:-0.5px; }
.logo .on{
  background: var(--gradiente);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-size:1.15em;
}
.logo .convite{ color: var(--texto); font-weight:600; }
.logo-sm{ font-size:20px; }
.logo.on-branco .on{ background:none; -webkit-text-fill-color:initial; color:#fff; }
.logo.on-branco .convite{ color:#fff; opacity:.92; }

/* ---------- Botões ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:13px 26px; border-radius:999px; font-weight:600; font-size:15px;
  border:2px solid transparent; transition:.2s ease; white-space:nowrap;
}
.btn-primary{ background: var(--gradiente); color:#fff; box-shadow:0 6px 20px rgba(108,60,233,.30); }
.btn-primary:hover{ transform:translateY(-1px); box-shadow:0 10px 26px rgba(108,60,233,.38); }
.btn-outline{ background:transparent; border-color: var(--borda); color: var(--texto); }
.btn-outline:hover{ border-color: var(--roxo); color: var(--roxo); }
.btn-ghost{ background:transparent; color: var(--texto); padding:10px 16px; }
.btn-ghost:hover{ color: var(--roxo); }
.btn-white{ background:#fff; color: var(--roxo); }
.btn-white:hover{ transform:translateY(-1px); }
.btn-danger{ background: var(--erro); color:#fff; }
.btn-confirmar{ background:#2D2A3D; color:#fff; box-shadow:0 6px 16px rgba(45,42,61,.25); border:none; }
.btn-confirmar:hover{ background:#403C56; }
.btn-block{ width:100%; }
.btn-sm{ padding:8px 16px; font-size:13px; }
.btn:disabled{ opacity:.6; cursor:not-allowed; transform:none; }

/* ---------- Header (site público) ---------- */
.site-header{
  position:sticky; top:0; z-index:100; background:rgba(255,255,255,.9);
  backdrop-filter:blur(10px); border-bottom:1px solid var(--borda);
}
.site-header .container{ display:flex; align-items:center; justify-content:space-between; height:76px; }
.site-nav{ display:flex; align-items:center; gap:32px; }
.site-nav a{ font-weight:500; font-size:14.5px; color: var(--texto-suave); transition:.15s; }
.site-nav a:hover{ color: var(--roxo); }
.header-actions{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; justify-content:flex-end; }
.menu-toggle{ display:none; background:none; border:none; font-size:24px; }

/* ---------- Hero ---------- */
.hero{ padding:76px 0 60px; overflow:hidden; }
.hero .container{ display:grid; grid-template-columns:1.1fr .9fr; gap:56px; align-items:center; }
.hero-badge{ display:inline-flex; align-items:center; gap:8px; background:var(--azul-claro); color:var(--roxo-escuro); font-weight:600; font-size:13px; padding:8px 16px; border-radius:999px; margin-bottom:20px; }
.hero h1{ font-size:48px; font-weight:800; letter-spacing:-1px; }
.hero h1 .grad{ background:var(--gradiente); -webkit-background-clip:text; background-clip:text; color:transparent; }
.hero p.lead{ font-size:18px; color:var(--texto-suave); max-width:480px; }
.hero-cta{ display:flex; gap:14px; margin-top:28px; flex-wrap:wrap; }

.phone-mock{
  position:relative; margin:0 auto; width:min(280px, 100%); height:570px; background:#111; border-radius:44px;
  padding:14px; box-shadow: var(--sombra); border:6px solid #111;
}
.phone-mock::before{ content:''; position:absolute; top:14px; left:50%; transform:translateX(-50%); width:90px; height:22px; background:#111; border-radius:14px; z-index:2; }
.phone-screen{ width:100%; height:100%; border-radius:32px; overflow:hidden; background:var(--gradiente); position:relative; }
.phone-screen .invite-card{ position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,0) 30%, rgba(0,0,0,.55) 100%); display:flex; flex-direction:column; justify-content:flex-end; padding:24px; color:#fff; }
.phone-screen .invite-card .tag{ font-size:11px; letter-spacing:2px; text-transform:uppercase; opacity:.85; margin-bottom:8px; }
.phone-screen .invite-card h3{ color:#fff; font-size:24px; margin-bottom:6px; }
.phone-screen .invite-card .meta{ font-size:13px; opacity:.9; margin-bottom:16px; }
.phone-screen .invite-card .btn{ padding:10px 18px; font-size:13px; }
.float-chip{ position:absolute; background:#fff; border-radius:14px; padding:10px 14px; box-shadow:var(--sombra); font-size:12.5px; font-weight:600; display:flex; align-items:center; gap:8px; }
.float-chip.chip-1{ top:60px; left:-30px; }
.float-chip.chip-2{ bottom:120px; right:-24px; }
.float-chip .dot{ width:8px; height:8px; border-radius:50%; background:var(--sucesso); }

/* ---------- Seções ---------- */
.section{ padding:80px 0; }
.section-alt{ background:#fff; }
.section-head{ text-align:center; max-width:620px; margin:0 auto 48px; }
.eyebrow{ color:var(--roxo); font-weight:700; font-size:13px; letter-spacing:1.5px; text-transform:uppercase; margin-bottom:10px; display:block; }
.section-head h2{ font-size:34px; font-weight:800; letter-spacing:-.5px; }

.steps-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:24px; }
.step-card{ text-align:center; padding:8px; }
.step-num{ width:56px; height:56px; border-radius:16px; background:var(--gradiente); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:20px; margin:0 auto 18px; }
.step-card h3{ font-size:17px; }
.step-card p{ font-size:14.5px; }

.features-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.feature-card{ background:#fff; border:1px solid var(--borda); border-radius:var(--raio); padding:26px; transition:.2s; }
.feature-card:hover{ box-shadow:var(--sombra); transform:translateY(-3px); border-color:transparent; }
.feature-icon{ width:46px; height:46px; border-radius:12px; background:var(--azul-claro); color:var(--roxo); display:flex; align-items:center; justify-content:center; font-size:22px; margin-bottom:16px; }
.feature-card h3{ font-size:16px; }
.feature-card p{ font-size:14px; margin:0; }

.models-tabs{ display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin-bottom:36px; }
.model-tab{ padding:9px 18px; border-radius:999px; border:1px solid var(--borda); font-size:13.5px; font-weight:600; color:var(--texto-suave); background:#fff; }
.model-tab.active, .model-tab:hover{ background:var(--gradiente); color:#fff; border-color:transparent; }
.models-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:22px; }
.model-card{ background:#fff; border-radius:var(--raio); overflow:hidden; border:1px solid var(--borda); transition:.2s; }
.model-card:hover{ box-shadow:var(--sombra); transform:translateY(-4px); }
.model-preview{ height:200px; background:var(--gradiente); position:relative; display:flex; align-items:flex-end; padding:16px; color:#fff; }
.model-preview .cat{ position:absolute; top:12px; left:12px; background:rgba(255,255,255,.25); backdrop-filter:blur(4px); font-size:11px; padding:4px 10px; border-radius:999px; }
.model-body{ padding:16px; display:flex; align-items:center; justify-content:space-between; gap:10px; }
.model-body h4{ font-size:15px; margin:0; }
.model-body span{ font-size:12.5px; color:var(--texto-suave); }

.cta-band{ background:var(--gradiente); border-radius:28px; padding:64px 40px; text-align:center; color:#fff; margin:0 24px; }
.cta-band h2{ color:#fff; font-size:32px; }
.cta-band p{ color:rgba(255,255,255,.85); }

.site-footer{ background:#151129; color:#fff; padding:56px 0 24px; margin-top:40px; }
.footer-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:32px; margin-bottom:36px; }
.footer-grid h4{ color:#fff; font-size:14px; margin-bottom:14px; }
.footer-grid a{ display:block; color:#B7AFD9; font-size:14px; margin-bottom:10px; }
.footer-grid a:hover{ color:#fff; }
.footer-bottom{ border-top:1px solid rgba(255,255,255,.12); padding-top:22px; font-size:13px; color:#8A82AD; display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; }

/* ---------- Formulários (auth) ---------- */
.auth-wrap{ min-height:100vh; display:grid; grid-template-columns:1fr 1fr; }
.auth-visual{ background:var(--gradiente); display:flex; align-items:center; justify-content:center; padding:60px; position:relative; overflow:hidden; }
.auth-visual .content{ color:#fff; max-width:380px; position:relative; z-index:2; }
.auth-visual h2{ color:#fff; font-size:30px; }
.auth-visual p{ color:rgba(255,255,255,.85); }
.auth-form-side{ display:flex; align-items:center; justify-content:center; padding:40px; }
.auth-box{ width:100%; max-width:400px; }
.auth-box .logo{ margin-bottom:28px; }
.auth-box h1{ font-size:26px; }
.auth-box > p{ margin-bottom:28px; }

.field{ margin-bottom:18px; }
.field label{ display:block; font-size:13.5px; font-weight:600; margin-bottom:7px; color:var(--texto); }
.field input, .field select, .field textarea{
  width:100%; padding:12px 14px; border:1.5px solid var(--borda); border-radius:var(--raio-sm);
  font-size:14.5px; font-family:inherit; background:#fff; transition:.15s; color: var(--texto);
}
.field input:focus, .field select:focus, .field textarea:focus{ outline:none; border-color:var(--roxo); box-shadow:0 0 0 4px rgba(108,60,233,.10); }
.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.field-check{ display:flex; align-items:flex-start; gap:10px; font-size:13.5px; color:var(--texto-suave); }
.field-check input{ width:auto; margin-top:3px; }
.field-hint{ font-size:12.5px; color:var(--texto-suave); margin-top:5px; }
.field-error{ font-size:12.5px; color:var(--erro); margin-top:5px; }
.auth-links{ display:flex; justify-content:space-between; font-size:13.5px; margin-top:16px; }
.auth-links a{ color:var(--roxo); font-weight:600; }
.divider-or{ text-align:center; color:var(--texto-suave); font-size:13px; margin:22px 0; }

/* ---------- Alertas ---------- */
.alert{ padding:14px 18px; border-radius:var(--raio-sm); font-size:14px; margin-bottom:20px; display:flex; align-items:center; gap:10px; }
.alert-success{ background:var(--sucesso-bg); color:var(--sucesso); }
.alert-error{ background:var(--erro-bg); color:var(--erro); }
.alert-warning{ background:var(--alerta-bg); color:var(--alerta); }

/* Aviso de prazo de confirmação — mais destacado que um texto simples,
   com a observação de que quem não confirmar a tempo fica de fora. */
.prazo-aviso{
  background: var(--alerta-bg);
  border: 1.5px solid rgba(224,162,0,.35);
  border-radius: 14px;
  padding: 16px 18px;
  margin-bottom: 16px;
  text-align: center;
}
.prazo-aviso .prazo-titulo{ display:block; font-weight:700; color:var(--texto); margin-bottom:6px; font-size:14.5px; }
.prazo-aviso .prazo-data{ display:block; font-weight:800; color:var(--alerta); font-size:16px; }
.prazo-aviso .prazo-obs{
  display:block; font-size:12.5px; color:var(--texto-suave); font-weight:600;
  border-top:1px dashed rgba(224,162,0,.45); margin-top:10px; padding-top:9px;
}

/* ---------- App shell (dashboard) ---------- */
.app-shell{ display:flex; min-height:100vh; }
.sidebar{ width:250px; background:#171233; color:#fff; padding:24px 16px; position:sticky; top:0; height:100vh; overflow-y:auto; flex-shrink:0; }
.sidebar .logo{ padding:8px 12px 26px; }
.sidebar-menu a{ display:flex; align-items:center; gap:12px; padding:11px 14px; border-radius:10px; color:#C7C0E8; font-size:14.5px; font-weight:500; margin-bottom:3px; }
.sidebar-menu a:hover{ background:rgba(255,255,255,.06); color:#fff; }
.sidebar-menu a.active{ background:var(--gradiente); color:#fff; }
.sidebar-menu .icon{ width:20px; text-align:center; }
.sidebar-section-label{ font-size:11px; text-transform:uppercase; letter-spacing:1px; color:#736C99; margin:20px 12px 10px; }
.sidebar-user{ margin-top:auto; padding:14px; background:rgba(255,255,255,.05); border-radius:12px; display:flex; align-items:center; gap:10px; }

.main-area{ flex:1; min-width:0; }
.topbar{ background:#fff; border-bottom:1px solid var(--borda); padding:0 32px; height:72px; display:flex; align-items:center; justify-content:space-between; position:sticky; top:0; z-index:10; }
.topbar h1{ font-size:20px; margin:0; }
.content-area{ padding:32px; max-width:1280px; }

.stats-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin-bottom:32px; }
.stat-card{ background:#fff; border:1px solid var(--borda); border-radius:var(--raio); padding:22px; }
.stat-card .stat-label{ font-size:13px; color:var(--texto-suave); font-weight:600; margin-bottom:8px; }
.stat-card .stat-value{ font-size:30px; font-weight:800; font-family:'Poppins',sans-serif; }
.stat-card.grad{ background:var(--gradiente); color:#fff; }
.stat-card.grad .stat-label{ color:rgba(255,255,255,.85); }

.card{ background:#fff; border:1px solid var(--borda); border-radius:var(--raio); padding:24px; margin-bottom:24px; }
.card-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:20px; }
.card-head h2{ font-size:17px; margin:0; }

.events-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(300px,1fr)); gap:20px; }
.event-card{ background:#fff; border:1px solid var(--borda); border-radius:var(--raio); overflow:hidden; }
.event-cover{ height:130px; background:var(--gradiente); position:relative; }
.event-cover img{ width:100%; height:100%; object-fit:cover; }
.event-badge{ position:absolute; top:12px; left:12px; font-size:11px; font-weight:700; padding:4px 10px; border-radius:999px; background:rgba(255,255,255,.9); color:var(--roxo-escuro); text-transform:uppercase; }
.event-body{ padding:18px; }
.event-body h3{ font-size:16px; margin-bottom:4px; }
.event-meta{ font-size:13px; color:var(--texto-suave); margin-bottom:14px; }
.event-progress{ height:6px; background:var(--azul-claro); border-radius:6px; overflow:hidden; margin-bottom:8px; }
.event-progress-bar{ height:100%; background:var(--gradiente); }
.event-stats-row{ display:flex; justify-content:space-between; font-size:12.5px; color:var(--texto-suave); margin-bottom:16px; }
.event-actions{ display:flex; gap:8px; flex-wrap:wrap; }
.event-actions .btn{ padding:8px 12px; font-size:12.5px; flex:1; }

.empty-state{ text-align:center; padding:70px 20px; background:#fff; border:1.5px dashed var(--borda); border-radius:var(--raio); }
.empty-state .icon-big{ font-size:44px; margin-bottom:14px; }
.empty-state h3{ font-size:18px; }
.empty-state p{ max-width:340px; margin-left:auto; margin-right:auto; }

.table-wrap{ overflow-x:auto; }
table.data-table{ width:100%; border-collapse:collapse; font-size:14px; }
table.data-table th{ text-align:left; padding:12px 14px; background:var(--fundo); color:var(--texto-suave); font-weight:600; font-size:12.5px; text-transform:uppercase; letter-spacing:.4px; }
table.data-table td{ padding:13px 14px; border-bottom:1px solid var(--borda); }
table.data-table tr:last-child td{ border-bottom:none; }
.badge{ display:inline-flex; align-items:center; gap:5px; padding:4px 11px; border-radius:999px; font-size:12px; font-weight:600; }
.badge-confirmado{ background:var(--sucesso-bg); color:var(--sucesso); }
.badge-pendente{ background:var(--alerta-bg); color:var(--alerta); }
.badge-recusado{ background:var(--erro-bg); color:var(--erro); }
.badge-publicado{ background:var(--sucesso-bg); color:var(--sucesso); }
.badge-rascunho{ background:var(--alerta-bg); color:var(--alerta); }
.table-toolbar{ display:flex; justify-content:space-between; align-items:center; gap:14px; margin-bottom:18px; flex-wrap:wrap; }
.search-box{ display:flex; align-items:center; gap:8px; border:1.5px solid var(--borda); border-radius:var(--raio-sm); padding:9px 14px; min-width:240px; background:#fff; }
.search-box input{ border:none; outline:none; width:100%; font-size:14px; }
.action-icons a, .action-icons button{ background:none; border:none; padding:6px; color:var(--texto-suave); font-size:15px; }
.action-icons a:hover, .action-icons button:hover{ color:var(--roxo); }

.wizard-steps{ display:flex; gap:8px; margin-bottom:32px; }
.wizard-step{ flex:1; text-align:center; padding:10px 8px; border-radius:999px; background:var(--azul-claro); font-size:12.5px; font-weight:700; color:var(--roxo-escuro); }
.wizard-step.active{ background:var(--gradiente); color:#fff; }
.wizard-step.done{ background:var(--sucesso-bg); color:var(--sucesso); }

.template-pick-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.template-pick-card{ border:2px solid var(--borda); border-radius:var(--raio); overflow:hidden; cursor:pointer; transition:.15s; background:#fff; }
.template-pick-card:hover{ border-color:var(--roxo); }
.template-pick-card.selected{ border-color:var(--roxo); box-shadow:0 0 0 4px rgba(108,60,233,.12); }
.template-pick-preview{ height:180px; display:flex; align-items:flex-end; padding:16px; color:#fff; }
.template-pick-body{ padding:14px 16px; display:flex; justify-content:space-between; align-items:center; }

/* ---------- Editor de convite ---------- */
.editor-layout{ display:grid; grid-template-columns:380px 1fr; gap:0; height:calc(100vh - 72px); }
.editor-panel{ overflow-x:hidden; overflow-y:auto; padding:26px; border-right:1px solid var(--borda); background:#fff; }
.editor-preview{ background:#EDEBFB; display:flex; align-items:center; justify-content:center; padding:40px; overflow-y:auto; }
.editor-group{ margin-bottom:26px; }
.editor-group h3{ font-size:13px; text-transform:uppercase; letter-spacing:.6px; color:var(--texto-suave); margin-bottom:14px; }
.color-swatches{ display:flex; gap:10px; }
.color-swatch{ width:34px; height:34px; border-radius:50%; border:3px solid #fff; box-shadow:0 0 0 1.5px var(--borda); cursor:pointer; }
.color-swatch.selected{ box-shadow:0 0 0 2px var(--roxo); }

.invite-preview-card{ width:320px; border-radius:28px; overflow:hidden; box-shadow:var(--sombra); background:#fff; }
.invite-preview-cover{ height:220px; background-size:cover; background-position:center; display:flex; align-items:flex-end; padding:20px; color:#fff; position:relative; overflow:hidden; }
.invite-preview-cover::after{ content:''; position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,0) 20%, rgba(0,0,0,.55) 100%); }
.invite-preview-cover *{ position:relative; z-index:1; }
.invite-preview-body{ padding:24px; text-align:center; }
.invite-preview-body .tag{ font-size:11px; letter-spacing:2px; text-transform:uppercase; color:var(--texto-suave); margin-bottom:10px; }
.invite-preview-body h2{ font-size:22px; margin-bottom:14px; }
.invite-preview-body .msg{ font-size:14px; color:var(--texto-suave); margin-bottom:20px; }
.invite-preview-countdown{ display:flex; justify-content:center; gap:10px; margin-bottom:20px; }
.invite-preview-countdown .cd-item{ background:var(--fundo); border-radius:10px; padding:10px 12px; min-width:56px; }
.invite-preview-countdown .cd-item strong{ display:block; font-size:18px; }
.invite-preview-countdown .cd-item span{ font-size:10px; color:var(--texto-suave); text-transform:uppercase; }
.invite-preview-info{ text-align:left; background:var(--fundo); border-radius:14px; padding:16px; margin-bottom:20px; font-size:13.5px; }
.invite-preview-info div{ display:flex; gap:10px; margin-bottom:8px; }
.invite-preview-info div:last-child{ margin-bottom:0; }

/* ---------- Página pública do convite ---------- */
.public-invite{ max-width:480px; margin:0 auto; min-height:100vh; background:#fff; box-shadow:0 0 60px rgba(0,0,0,.06); }
.public-cover{ height:400px; background-size:cover; background-position:center; position:relative; overflow:hidden; display:flex; align-items:flex-end; padding:32px 26px; color:#fff; }
.public-cover::after{ content:''; position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,.05) 20%, rgba(0,0,0,.75) 100%); z-index:2; }
.public-cover .cover-photo-img{ position:absolute; top:50%; left:50%; z-index:1; pointer-events:none; }
.public-cover .cover-content{ position:relative; z-index:4; }
.public-cover .tag{ letter-spacing:3px; text-transform:uppercase; font-size:12px; opacity:.9; margin-bottom:10px; }
.public-cover h1{ color:#fff; font-size:30px; margin-bottom:8px; }
.public-body{ padding:30px 26px; }
.public-section{ margin-bottom:30px; text-align:center; }
.public-section h2{ font-size:14px; text-transform:uppercase; letter-spacing:1px; color:var(--texto-suave); margin-bottom:16px; }
.countdown-grid{ display:flex; gap:10px; justify-content:center; }
.countdown-grid .cd{ background:var(--fundo); border-radius:14px; padding:14px 10px; min-width:64px; }
.countdown-grid .cd strong{ display:block; font-size:24px; font-family:'Poppins',sans-serif; }
.countdown-grid .cd span{ font-size:10.5px; text-transform:uppercase; color:var(--texto-suave); }
/* Mensagem dos anfitriões: visual de "pergaminho", com fonte cursiva e
   aspas decorativas, em vez da caixa lisa de antes. */
.public-message{
  position:relative;
  background: linear-gradient(160deg, #FFFCF5 0%, #FCF3DA 55%, #F8E9C4 100%);
  border-radius:6px 18px 6px 18px;
  padding:32px 30px 26px;
  font-family:'Caveat','Playfair Display',cursive;
  font-size:22px;
  font-weight:600;
  color:#6B4F2E;
  line-height:1.5;
  box-shadow:0 10px 26px rgba(150,110,40,.16), inset 0 0 0 1px rgba(196,156,92,.4);
  border:1px solid rgba(196,156,92,.32);
}
.public-message::before,
.public-message::after{
  content:'“'; position:absolute; font-family:'Playfair Display',serif; color:rgba(196,156,92,.45); line-height:1;
  font-size:46px; top:6px; left:14px;
}
.public-message::after{ content:'”'; left:auto; right:14px; top:auto; bottom:-6px; }
.info-list{ text-align:left; }
.info-row{ display:flex; gap:14px; padding:14px 0; border-bottom:1px solid var(--borda); }
.info-row:last-child{ border-bottom:none; }
.info-row .ico{ width:38px; height:38px; border-radius:10px; background:var(--azul-claro); color:var(--roxo); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.info-row strong{ display:block; font-size:14.5px; }
.info-row span{ font-size:13px; color:var(--texto-suave); }

/* Cores de texto/contraste personalizáveis (modo moldura) — só têm efeito
   quando a página injeta as variáveis abaixo via <style> (ver convite.php /
   convite-grupo.php); sem isso, o visual padrão continua 100% igual. */
.moldura-cores-custom .public-section h2{ color:var(--cor-titulos-secao); }
.moldura-cores-custom .info-row{ border-bottom-color:var(--cor-borda-info); }
.moldura-cores-custom .info-row span{ color:var(--cor-texto-secundario); }
.moldura-cores-custom .btn-outline{ border-color:var(--cor-btn-outline-borda); color:var(--cor-btn-outline-texto); }
.moldura-cores-custom .btn-outline:hover{ opacity:.82; }
.public-actions{ display:flex; flex-direction:column; gap:12px; margin-top:10px; }
.public-footer{ text-align:center; padding:24px; font-size:12px; color:var(--texto-suave); }

.modal-overlay{ position:fixed; inset:0; background:rgba(20,15,45,.55); display:flex; align-items:center; justify-content:center; z-index:1000; padding:20px; }
.modal-box{ background:#fff; border-radius:20px; width:100%; max-width:420px; padding:30px; max-height:90vh; overflow-y:auto; }
.modal-box h3{ font-size:20px; }
.modal-close{ float:right; background:none; border:none; font-size:20px; color:var(--texto-suave); }

.confirm-success{ text-align:center; padding:20px 0; }
.confirm-success .icon-circle{ width:70px; height:70px; border-radius:50%; background:var(--sucesso-bg); color:var(--sucesso); display:flex; align-items:center; justify-content:center; font-size:32px; margin:0 auto 18px; }

/* ---------- Utilitários ---------- */
.text-center{ text-align:center; }
.mt-0{ margin-top:0; } .mb-0{ margin-bottom:0; }
.flex{ display:flex; } .items-center{ align-items:center; } .justify-between{ justify-content:space-between; } .gap-8{ gap:8px; } .gap-12{ gap:12px; }
.hidden{ display:none !important; }
.spinner{ width:18px; height:18px; border:2.5px solid rgba(255,255,255,.4); border-top-color:#fff; border-radius:50%; animation:spin .7s linear infinite; }
@keyframes spin{ to{ transform:rotate(360deg); } }
.loading-overlay{ position:fixed; inset:0; background:rgba(255,255,255,.7); display:flex; align-items:center; justify-content:center; z-index:2000; }

/* ---------- Responsivo ---------- */
@media (max-width: 980px){
  .hero .container{ grid-template-columns:1fr; }
  .phone-mock{ margin-top:40px; }
  .steps-grid, .features-grid, .models-grid{ grid-template-columns:repeat(2,1fr); }
  .footer-grid{ grid-template-columns:1fr 1fr; }
  .auth-wrap{ grid-template-columns:1fr; }
  .auth-visual{ display:none; }
  .stats-grid{ grid-template-columns:1fr 1fr; }
  .editor-layout{ grid-template-columns:1fr; height:auto; }
  .sidebar{ position:fixed; left:-260px; z-index:200; transition:.2s; }
  .sidebar.open{ left:0; }
  .menu-toggle{ display:block; }
}
@media (max-width: 640px){
  .site-nav{ display:none; }
  .logo{ font-size:21px; }
  .site-header .container{ height:auto; min-height:68px; padding-top:10px; padding-bottom:10px; }
  .header-actions{ gap:6px; }
  .header-actions .btn{ padding:9px 14px; font-size:13px; }
  .hero h1{ font-size:34px; }
  .hero-cta{ flex-direction:column; align-items:stretch; }
  .hero-cta .btn{ width:100%; }
  .float-chip{ display:none; }
  .steps-grid, .features-grid, .models-grid, .template-pick-grid{ grid-template-columns:1fr; }
  .stats-grid{ grid-template-columns:1fr 1fr; }
  .cta-band{ margin:0; border-radius:0; }
  .field-row{ grid-template-columns:1fr; }
  .content-area{ padding:18px; }
  .topbar{ padding:0 18px; }
  .editor-panel{ padding:18px; }
  .editor-preview{ padding:22px 14px; }
  .texto-estilo-row{ gap:8px; }
  .texto-estilo-label{ width:100%; }
  .moldura-card-wrap{ padding:14px 10px 22px; }
}

/* =========================================================
   Editor de foto de capa (arrastar para posicionar + zoom)
   ========================================================= */
.cover-editor-frame{
  position:relative; width:100%; height:220px; border-radius:16px;
  overflow:hidden; background:var(--fundo); cursor:grab;
  border:1.5px solid var(--borda); user-select:none; touch-action:none;
}
.cover-editor-frame.dragging{ cursor:grabbing; }
.cover-editor-frame .cover-editor-img{
  position:absolute; top:50%; left:50%; pointer-events:none;
}
.cover-editor-empty{
  position:absolute; inset:0; display:flex; flex-direction:column; align-items:center;
  justify-content:center; color:var(--texto-suave); font-size:13px; gap:6px; text-align:center; padding:20px;
}
.cover-editor-empty .icon{ font-size:26px; }
.cover-editor-hint{
  position:absolute; bottom:8px; left:50%; transform:translateX(-50%);
  background:rgba(20,15,45,.55); color:#fff; font-size:11px; padding:4px 10px;
  border-radius:999px; pointer-events:none; opacity:.9;
}
.zoom-control{ display:flex; align-items:center; gap:10px; margin-top:12px; }
.zoom-control span{ font-size:13px; color:var(--texto-suave); }
.zoom-control input[type="range"]{ flex:1; accent-color:var(--roxo); }

/* =========================================================
   Templates "Festa Kids" — estilos decorativos originais
   (sem uso de personagens ou marcas licenciadas)
   ========================================================= */

/* ---- Skin 1: Balões & Nuvens ---- */
.kids-skin-baloes .cover-mask{ position:relative; overflow:hidden; }
.kids-skin-baloes .cover-stripe{
  position:absolute; left:0; right:0; bottom:0; height:22px; z-index:3;
  background-image: repeating-linear-gradient(90deg,
    #FDE7C8 0 26px, #FBD1DC 26px 52px, #D9E4FB 52px 78px,
    #FFFFFF 78px 104px, #CFEAE6 104px 130px);
}
.kids-skin-baloes .cover-balloons{
  position:absolute; left:0; right:0; top:0; height:64px; z-index:3; pointer-events:none;
  background-repeat:repeat-x; background-size:230px 64px;
  background-image:
    radial-gradient(circle at 8% 55%, #8FD3C7 0 15px, transparent 16px),
    radial-gradient(circle at 8% 55%, rgba(255,255,255,.55) 3px 6px, transparent 7px),
    radial-gradient(circle at 24% 25%, #B8B0E8 0 15px, transparent 16px),
    radial-gradient(circle at 24% 25%, rgba(255,255,255,.55) 3px 6px, transparent 7px),
    radial-gradient(circle at 42% 48%, #F7B8CE 0 13px, transparent 14px),
    radial-gradient(circle at 42% 48%, rgba(255,255,255,.55) 2px 5px, transparent 6px),
    radial-gradient(circle at 60% 20%, #8FD3C7 0 14px, transparent 15px),
    radial-gradient(circle at 60% 20%, rgba(255,255,255,.55) 2px 5px, transparent 6px),
    radial-gradient(circle at 78% 45%, #FBD097 0 15px, transparent 16px),
    radial-gradient(circle at 78% 45%, rgba(255,255,255,.55) 3px 6px, transparent 7px);
}
.kids-skin-baloes .cover-clouds{
  position:absolute; left:0; right:0; bottom:16px; height:36px; z-index:3; pointer-events:none; opacity:.9;
  background-repeat:repeat-x; background-size:180px 36px;
  background-image:
    radial-gradient(circle at 20% 70%, #fff 0 14px, transparent 15px),
    radial-gradient(circle at 32% 55%, #fff 0 18px, transparent 19px),
    radial-gradient(circle at 46% 70%, #fff 0 12px, transparent 13px);
}
.kids-skin-baloes .public-body{ background: linear-gradient(180deg, #FFF9F0 0%, #F7F6FC 220px); }
.kids-skin-baloes .btn-primary{ background: linear-gradient(135deg, #FF9FBB, #8FD3C7) !important; }

/* ---- Skin 2: Confete Divertido ---- */
.kids-skin-confete .cover-mask{ position:relative; overflow:hidden; }
.kids-skin-confete .cover-confete{
  position:absolute; inset:0; z-index:3; pointer-events:none; opacity:.85; mix-blend-mode:overlay;
  background-repeat:repeat; background-size:120px 120px;
  background-image:
    radial-gradient(circle at 10% 20%, #fff 0 4px, transparent 5px),
    radial-gradient(circle at 80% 10%, #fff 0 3px, transparent 4px),
    radial-gradient(circle at 60% 60%, #fff 0 5px, transparent 6px),
    radial-gradient(circle at 30% 80%, #fff 0 3px, transparent 4px),
    radial-gradient(circle at 90% 70%, #fff 0 4px, transparent 5px);
}
.kids-skin-confete .cover-stripe{
  position:absolute; left:0; right:0; bottom:0; height:18px; z-index:3;
  background-image: repeating-linear-gradient(45deg,
    #FF6FA5 0 14px, #FFC15E 14px 28px, #6FCF97 28px 42px, #6EC1E4 42px 56px);
}
.kids-skin-confete .public-body{ background: linear-gradient(180deg, #FFF4E8 0%, #F7F6FC 220px); }
.kids-skin-confete .btn-primary{ background: linear-gradient(135deg, #FF6FA5, #FFC15E) !important; }

/* ---- Skin 3: Estrelinhas ---- */
.kids-skin-estrelinhas .cover-mask{ position:relative; overflow:hidden; }
.kids-skin-estrelinhas .cover-stars{
  position:absolute; inset:0; z-index:3; pointer-events:none;
  background-repeat:repeat; background-size:140px 140px;
  background-image:
    radial-gradient(2px 2px at 20px 30px, #fff 99%, transparent),
    radial-gradient(1.5px 1.5px at 70px 90px, #fff 99%, transparent),
    radial-gradient(2px 2px at 110px 40px, #fff 99%, transparent),
    radial-gradient(1.5px 1.5px at 40px 110px, #fff 99%, transparent),
    radial-gradient(1.5px 1.5px at 90px 20px, #fff 99%, transparent);
  opacity:.8;
}
.kids-skin-estrelinhas .cover-moon{
  position:absolute; top:18px; right:22px; width:34px; height:34px; border-radius:50%;
  background:#FFE9A8; box-shadow: -8px 2px 0 0 rgba(20,15,45,.35) inset; z-index:3; pointer-events:none;
}
.kids-skin-estrelinhas .cover-stripe{
  position:absolute; left:0; right:0; bottom:0; height:18px; z-index:3;
  background: linear-gradient(90deg, #6C63A6, #8B7FD1, #6C63A6);
}
.kids-skin-estrelinhas .public-body{ background: linear-gradient(180deg, #EFEBFB 0%, #F7F6FC 220px); }
.kids-skin-estrelinhas .btn-primary{ background: linear-gradient(135deg, #6C63A6, #8B7FD1) !important; }

/* Miniaturas do seletor de skin no editor */
.skin-pick-card{ border:2px solid var(--borda); border-radius:14px; overflow:hidden; cursor:pointer; transition:.15s; background:#fff; }
.skin-pick-card:hover{ border-color:var(--roxo); }
.skin-pick-card.selected{ border-color:var(--roxo); box-shadow:0 0 0 3px rgba(108,60,233,.12); }
.skin-pick-preview{ height:74px; position:relative; overflow:hidden; }
.skin-pick-label{ padding:8px 10px; font-size:12px; font-weight:600; text-align:center; }

/* =========================================================
   Moldura personalizada (upload de arte própria pelo usuário)
   ========================================================= */
.moldura-preview-card, .moldura-card{
  position:relative; width:100%; aspect-ratio:2/3; overflow:hidden;
  border-radius:20px; background:#F4F3FA; box-shadow:var(--sombra);
}
.moldura-preview-foto, .moldura-foto{
  position:absolute; aspect-ratio:1/1; border-radius:50%; overflow:hidden;
  transform:translate(-50%,-50%); background:#E7E4F4; z-index:1;
  box-shadow:0 0 0 4px #fff, 0 4px 14px rgba(0,0,0,.15);
}
.moldura-preview-foto img, .moldura-foto img{ width:100%; height:100%; object-fit:cover; display:block; }
.moldura-preview-arte, .moldura-arte{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:3; pointer-events:none;
}
.moldura-preview-texto, .moldura-texto{
  position:absolute; left:8%; right:8%; text-align:center; transform:translateY(-50%); z-index:4; pointer-events:none;
}
.moldura-preview-texto strong, .moldura-texto strong{
  display:block; font-family:'Poppins',sans-serif; font-size:26px; font-weight:800; color:var(--texto);
  text-shadow:0 1px 2px rgba(255,255,255,.6);
}
.moldura-preview-texto span, .moldura-texto span{ display:block; font-size:13.5px; color:var(--texto-suave); margin-top:4px; }

/* =========================================================
   Moldura personalizada — elementos de texto arrastáveis,
   formato da foto, banners decorativos e efeito de cartão 3D
   ========================================================= */

/* Efeito de cartão "3D" (sombra em profundidade + leve inclinação) */
.moldura-card, .moldura-card-wrap .moldura-card{
  box-shadow:
    0 2px 0 rgba(255,255,255,.6) inset,
    0 18px 40px -12px rgba(30, 20, 70, .35),
    0 6px 14px -6px rgba(30, 20, 70, .25);
  border:1px solid rgba(255,255,255,.5);
}
.moldura-card-wrap{ perspective:1200px; padding:18px 14px 28px; background: linear-gradient(180deg, #c4dfea, #d1e5bf 60%); }
/*.moldura-card-wrap .moldura-card{ transform:rotateY(-3deg) rotateX(1deg); transition:transform .3s; }  */

/* Linhas de estilo de texto (tamanho/cor/fonte) no editor */
.texto-estilo-row{ display:flex; align-items:center; gap:12px; padding:10px 0; border-bottom:1px solid var(--borda); flex-wrap:wrap; }
.texto-estilo-row:last-child{ border-bottom:none; }
.texto-estilo-label{ font-size:13px; font-weight:600; width:90px; flex-shrink:0; }
.texto-estilo-tamanho{ display:flex; align-items:center; gap:4px; }
.texto-estilo-tamanho input{ padding:6px 4px; border:1.5px solid var(--borda); border-radius:8px; font-size:13px; }
.input-cor-compacta{ width:38px; height:38px; padding:2px; border:1.5px solid var(--borda); border-radius:8px; cursor:pointer; }
.moldura-foto.formato-circulo, .moldura-preview-foto.formato-circulo{ border-radius:50%; }
.moldura-foto.formato-quadrado, .moldura-preview-foto.formato-quadrado{ border-radius:16px; }

/* Editor da "Foto do aniversariante" (modo moldura): usa classes próprias
   (não .moldura-foto) para não herdar position:absolute/transform do preview
   real, que é o que quebrava o posicionamento desse bloco no painel. */
.moldura-foto-editor{
  position:relative; width:min(220px, 100%); max-width:100%; height:auto;
  aspect-ratio:1/1; margin:14px auto 0; box-sizing:border-box; left:auto; top:auto; transform:none;
}
.moldura-foto-editor.formato-editor-circulo{ border-radius:50%; }
.moldura-foto-editor.formato-editor-quadrado{ border-radius:16px; }

/* Elementos de texto móveis dentro da moldura */
.moldura-texto-movel{
  position:absolute; transform:translate(-50%,-50%); z-index:5; text-align:center;
  white-space:nowrap; pointer-events:none;
}
.moldura-texto-movel.editavel{ pointer-events:auto; cursor:move; }
.moldura-texto-movel.editavel:hover{ outline:1.5px dashed var(--roxo); outline-offset:4px; border-radius:6px; }
.moldura-texto-movel.arrastando{ outline:2px solid var(--roxo); outline-offset:4px; border-radius:6px; z-index:20; }
.moldura-texto-movel .valor{ font-family:'Poppins',sans-serif; }
.moldura-texto-movel[data-campo="nome"] .valor{ font-size:26px; font-weight:800; color:var(--texto); text-shadow:0 1px 2px rgba(255,255,255,.7); }
.moldura-texto-movel[data-campo="titulo"] .valor{ font-size:14px; font-weight:600; color:var(--texto-suave); }
.moldura-texto-movel[data-campo="idade"] .valor,
.moldura-texto-movel[data-campo="data"] .valor,
.moldura-texto-movel[data-campo="dia"] .valor,
.moldura-texto-movel[data-campo="hora"] .valor{ font-size:14px; font-weight:700; color:var(--texto); }

/* Banners decorativos reutilizáveis (rodapé / acima de "Detalhes do evento") */
.banner-decorativo{ width:100%; height:56px; position:relative; overflow:hidden; }
.banner-decorativo.banner-full-bleed{ width:auto; margin:0 -26px; }
.banner-decorativo.banner-baloes{
  background-repeat:repeat-x; background-size:230px 56px; background-color:#F7F3FF;
  background-image:
    radial-gradient(circle at 8% 55%, #8FD3C7 0 13px, transparent 14px),
    radial-gradient(circle at 24% 25%, #B8B0E8 0 13px, transparent 14px),
    radial-gradient(circle at 42% 48%, #F7B8CE 0 11px, transparent 12px),
    radial-gradient(circle at 60% 20%, #8FD3C7 0 12px, transparent 13px),
    radial-gradient(circle at 78% 45%, #FBD097 0 13px, transparent 14px);
}
.banner-decorativo.banner-listras{
  background-image: repeating-linear-gradient(90deg,
    #FDE7C8 0 26px, #FBD1DC 26px 52px, #D9E4FB 52px 78px,
    #FFFFFF 78px 104px, #CFEAE6 104px 130px);
}
.banner-decorativo img{ width:100%; height:100%; object-fit:cover; display:block; }
/* Faixa com imagem própria ("Minha imagem"): usa a altura natural da imagem
   em vez da altura fixa de 56px das faixas prontas (balões/listras) — do
   jeito que estava antes, imagens com proporção diferente ficavam cortadas
   no height. A altura fixa continua valendo só para os padrões de CSS. */
.banner-decorativo.banner-imagem{ height:auto; }
.banner-decorativo.banner-imagem img{ height:auto; object-fit:initial; }