/* ============================================================
   Cartão Digital AO — tokens
   Paleta: claro e minimalista (branco + azul sólido), inspirado no Uzeka
   Display + Corpo: Manrope (geométrica, limpa, sem serifa, legível em ecrãs pequenos)
   ============================================================ */
:root{
  --ink: #FFFFFF;
  --ink-2: #F5F7FB;
  --ink-3: #E5E9F1;
  --sand: #0F172A;
  --sand-dim: #64748B;
  --gold: #1D5FAD;
  --gold-dim: #154680;
  --clay: #1D5FAD;
  --teal: #1D5FAD;
  --danger: #E15B52;

  --radius-lg: 22px;
  --radius-md: 14px;
  --radius-sm: 8px;

  --shadow-card: 0 16px 34px -18px rgba(18,21,28,.22);

  --font-display: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-body: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* ============================================================
   Templates — cada um redefine as variáveis base, por isso todos
   os componentes (botões, cartão, ecrã) mudam de identidade sozinhos.
   Aplica-se a classe .theme-X num contentor (ecrã inteiro ou só o
   card-preview num swatch de escolha).
   ============================================================ */

/* Obsidian — dark mode preciso, para tecnologia e corporate (id: classico) */
.theme-classico{
  --ink:#0C0E13; --ink-2:#15181F; --ink-3:#20242E;
  --sand:#F4F6FA; --sand-dim:#828A9C;
  --gold:#5B9CFF; --gold-dim:#3568C2; --clay:#5B9CFF; --teal:#5B9CFF;
  --card-photo-radius: 12px;
}

/* Aurora — minimalismo luminoso, tipografia refinada (id: verao) */
.theme-verao{
  --ink:#F1F4FB; --ink-2:#FFFFFF; --ink-3:#E1E7F5;
  --sand:#171A2E; --sand-dim:#6E7590;
  --gold:#6E7EFF; --gold-dim:#4E5CDA; --clay:#6E7EFF; --teal:#6E7EFF;
  --card-photo-radius: 999px;
}

/* Slate — neutralidade sofisticada, universal e atemporal (id: noite) */
.theme-noite{
  --ink:#1A1C20; --ink-2:#232529; --ink-3:#303338;
  --sand:#F2F1EF; --sand-dim:#9B9A97;
  --gold:#B7B2A8; --gold-dim:#847F76; --clay:#B7B2A8; --teal:#B7B2A8;
  --card-photo-radius: 12px;
}

/* — Premium — */

/* Dourado Cerimonial — cinza-carvão com dourado, para eventos e cerimónia */
.theme-dourado{
  --ink:#242023; --ink-2:#2E282C; --ink-3:#3B3338;
  --sand:#F3ECE2; --sand-dim:#B3A99C;
  --gold:#C9A227; --gold-dim:#8A6E1B; --clay:#C9A227; --teal:#C9A227;
  --card-photo-radius: 12px;
}

/* Rosé Executivo — lavanda-cinza claro, acabamento rosé-gold */
.theme-rose{
  --ink:#E7E1E4; --ink-2:#F5F1F3; --ink-3:#DCD2D7;
  --sand:#241B20; --sand-dim:#7A6B71;
  --gold:#B76E79; --gold-dim:#8C4F58; --clay:#B76E79; --teal:#8C4F58;
  --card-photo-radius: 999px;
}

/* Impacto Noturno — preto fosco, acento vibrante */
.theme-impacto{
  --ink:#0A0A0C; --ink-2:#151317; --ink-3:#221E24;
  --sand:#F5F3F5; --sand-dim:#948E96;
  --gold:#FF4D6D; --gold-dim:#B8324A; --clay:#FF4D6D; --teal:#FF4D6D;
  --card-photo-radius: 999px;
}

/* Verde Executivo — elegância moderna, verde-teal profundo */
.theme-verde{
  --ink:#0A2420; --ink-2:#0F3630; --ink-3:#155048;
  --sand:#EAFBF5; --sand-dim:#8FCFC0;
  --gold:#33D9B2; --gold-dim:#1E9C7D; --clay:#33D9B2; --teal:#33D9B2;
  --card-photo-radius: 12px;
}

/* Atlântico — geométrico, institucional, tons de cartão bancário */
.theme-atlantico{
  --ink:#0B3B38; --ink-2:#0F4D48; --ink-3:#14615A;
  --sand:#EAFBF7; --sand-dim:#9FD8CE;
  --gold:#2FD9C4; --gold-dim:#17A091; --clay:#2FD9C4; --teal:#2FD9C4;
  --card-photo-radius: 12px;
}

/* Aquarela Dourada — manchas suaves em azul e dourado */
.theme-aquarela{
  --ink:#101426; --ink-2:#171C33; --ink-3:#232A47;
  --sand:#F3F0FF; --sand-dim:#A9A6C9;
  --gold:#E8B84B; --gold-dim:#B08A2E; --clay:#5B7FE0; --teal:#5B7FE0;
  --card-photo-radius: 12px;
}

/* Cosmos — nebulosa profunda com estrelas subtis */
.theme-cosmos{
  --ink:#0C0A1E; --ink-2:#141029; --ink-3:#1F1A3B;
  --sand:#F0EEFB; --sand-dim:#9791BE;
  --gold:#B98CFF; --gold-dim:#7C56C4; --clay:#FF8CC8; --teal:#B98CFF;
  --card-photo-radius: 999px;
}

/* Neon Tokyo — cyberpunk, magenta + ciano sobre preto */
.theme-neontokyo{
  --ink:#050510; --ink-2:#0B0B1C; --ink-3:#171129;
  --sand:#F3EEFF; --sand-dim:#9C93C4;
  --gold:#FF2E9A; --gold-dim:#B0186A; --clay:#00E5FF; --teal:#00E5FF;
  --card-photo-radius: 10px;
}

/* Holograma — gradiente iridescente animado */
.theme-holograma{
  --ink:#EDE6FB; --ink-2:#F6F1FF; --ink-3:#DCCFF5;
  --sand:#211538; --sand-dim:#6B5C8C;
  --gold:#7C3AED; --gold-dim:#5B21B6; --clay:#7C3AED; --teal:#7C3AED;
  --card-photo-radius: 12px;
}

/* Polaroid Vintage — papel, moldura branca, ligeiramente inclinado */
.theme-polaroid{
  --ink:#FFFFFF; --ink-2:#FFFDF6; --ink-3:#ECE4CE;
  --sand:#2B2620; --sand-dim:#8A8070;
  --gold:#8A6D3B; --gold-dim:#6B5329; --clay:#8A6D3B; --teal:#8A6D3B;
  --card-photo-radius: 5px;
}

/* ============================================================
   Acentos de secção da APP (não confundir com os presets acima)
   ============================================================
   Os 13 blocos .theme-X acima são presets de DESENHO DO CARTÃO
   PÚBLICO que cada cliente escolhe para o seu próprio cartão — por
   isso alguns são propositadamente escuros/vibrantes.

   Estas três classes aqui são diferentes: servem só para dar um
   toque de cor de destaque a cada secção da PRÓPRIA APP (Login/Hub,
   Convites, Menus) — têm de ficar sempre claras, como o resto da
   app, e só variam a cor de acento (--gold local).
   ============================================================ */
.app-azul{
  --gold:#1D5FAD; --gold-dim:#154680; --clay:#1D5FAD; --teal:#1D5FAD;
}
.app-dourado{
  --gold:#C9922B; --gold-dim:#9C701C; --clay:#C9922B; --teal:#C9922B;
}
.app-verde{
  --gold:#12A883; --gold-dim:#0C7C61; --clay:#12A883; --teal:#12A883;
}

*{ box-sizing: border-box; }
html,body{ height:100%; overflow-x:hidden; width:100%; }
body{
  margin:0;
  background: var(--ink);
  color: var(--sand);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  overscroll-behavior-y: none;
}
img{ max-width:100%; display:block; }
button{ font-family: inherit; }
a{ color: inherit; }

/* pattern faixa — motivo têxtil angolano em zigue-zague, feito só com CSS */
.weave{
  height: 10px;
  background:
    linear-gradient(135deg, transparent 45%, var(--gold) 45%, var(--gold) 55%, transparent 55%) 0 0/16px 16px,
    linear-gradient(-135deg, transparent 45%, var(--clay) 45%, var(--clay) 55%, transparent 55%) 0 0/16px 16px;
  opacity:.9;
}

.screen{ min-height:100%; padding-bottom: 48px; background: var(--ink); color: var(--sand); transition: background-color .15s ease; }
.wrap{ max-width: 480px; margin: 0 auto; padding: 0 20px; }

/* ---------- topbar ---------- */
.topbar{
  display:flex; align-items:center; justify-content:space-between;
  padding: 18px 20px 8px;
  max-width: 480px; margin: 0 auto;
}
.brand{
  display:flex; align-items:center; gap:10px;
  font-family: var(--font-body); font-weight:700; font-size: 16px; letter-spacing:.1px;
}
.brand .mark{
  width:30px; height:30px; border-radius:9px;
  object-fit: contain;
  flex-shrink:0;
}
.icon-btn{
  background: var(--ink-2); border:1px solid var(--ink-3); color: var(--sand);
  width:38px; height:38px; border-radius: 12px; display:flex; align-items:center; justify-content:center;
  cursor:pointer; position:relative;
}
.icon-btn:hover{ border-color: var(--gold-dim); }

/* menu de definições (dropdown simples) */
.menu-wrap{ position:relative; }
.menu-dropdown{
  position:absolute; right:0; top:46px; min-width:180px; z-index: 50;
  background: var(--ink-2); border:1px solid var(--ink-3); border-radius: var(--radius-md);
  box-shadow: var(--shadow-card); overflow:hidden; display:none;
}
.menu-dropdown.open{ display:block; }
.menu-dropdown button{
  display:block; width:100%; text-align:left; background:none; border:none; color: var(--sand);
  padding: 12px 16px; font-size: 13.5px; cursor:pointer;
}
.menu-dropdown button:hover{ background: var(--ink-3); }
.menu-dropdown button.danger{ color: var(--danger); }

/* ---------- hero ---------- */
.hero{ padding: 10px 0 22px; }
.hero h1{
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 34px;
  line-height: 1.08;
  margin: 6px 0 10px;
  letter-spacing: -0.3px;
}
.hero h1 em{ font-style: normal; color: var(--gold); }
.hero p{ color: var(--sand-dim); font-size: 15px; line-height:1.5; margin: 0 0 4px; max-width: 40ch; }

/* mancha de gradiente suave no topo de ecrãs de destaque (login, hub) —
   inspirada no efeito "mesh" luminoso de apps como o Uzeka */
.mesh-bg{
  position:relative; overflow:hidden;
  margin: -18px -20px 0; padding: 34px 20px 4px;
}
.mesh-bg::before{
  content:""; position:absolute; inset:-30% 0 auto 0; height:200px; z-index:0;
  background:
    radial-gradient(closest-side, color-mix(in srgb, var(--gold) 30%, transparent), transparent 100%) 15% 25%/70% 100% no-repeat,
    radial-gradient(closest-side, color-mix(in srgb, #FF7AC6 24%, transparent), transparent 100%) 85% 15%/65% 100% no-repeat,
    radial-gradient(closest-side, color-mix(in srgb, #7AF0D6 22%, transparent), transparent 100%) 55% 45%/60% 100% no-repeat;
  opacity:.7;
  pointer-events:none;
}
.mesh-bg > *{ position:relative; z-index:1; }

/* ---------- navegação inferior flutuante ---------- */
.bottom-nav{
  position:fixed; left:0; right:0; bottom:0; z-index:50;
  max-width:480px; margin:0 auto;
  display:flex; align-items:center; justify-content:space-around;
  padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px));
  background: var(--ink-2); border-top:1px solid var(--ink-3);
  box-shadow: 0 -12px 30px -14px rgba(18,21,28,.18);
}
.bottom-nav-item{
  display:flex; flex-direction:column; align-items:center; gap:3px;
  background:none; border:none; color: var(--sand-dim); font-family:inherit;
  font-size:10.5px; font-weight:700; cursor:pointer; padding:6px 14px; flex:1;
}
.bottom-nav-item .bn-icon{ font-size:19px; line-height:1; }
.bottom-nav-item.active{ color: var(--gold); }
.bottom-nav-fab{
  width:56px; height:56px; border-radius:50%; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  background: var(--gold); color:#fff; font-size:26px; font-weight:700;
  border:5px solid var(--ink); margin-top:-32px;
  box-shadow: 0 12px 24px -8px color-mix(in srgb, var(--gold) 65%, transparent);
  cursor:pointer; transition: transform .12s ease;
}
.bottom-nav-fab:active{ transform: scale(.92); }
.screen-com-bottom-nav .wrap{ padding-bottom: 96px; }

/* ---------- impressão / gerar PDF ---------- */
/* Usa-se window.print() no botão "Gerar PDF" — sem biblioteca nova, o
   utilizador escolhe "Guardar como PDF" no diálogo de impressão do browser.
   Aqui escondemos tudo o que só faz sentido no ecrã (barras, botões) e
   deixamos só o conteúdo relevante + QR. */
.pdf-only, .pdf-cabecalho, .pdf-rodape{ display:none; }
@page{ margin: 16mm 14mm; }

@media print{
  body{ background:#fff; }
  .topbar, .bottom-nav, .sticky-cta-bar, .cart-bar, .btn, .icon-btn,
  .app-footer, .plano-aviso, .plano-aviso-info, .badge-empty, .eyebrow a, .no-print{ display:none !important; }
  .screen{ background:#fff !important; color:#111 !important; padding-bottom:0 !important; }
  .wrap{ max-width:560px !important; padding:0 !important; margin:0 auto !important; }

  /* Toda a app fica escondida a imprimir, exceto o que marcarmos como
     pertencendo à folha impressa — assim controlamos exatamente o que sai
     no PDF, sem restos de UI do ecrã. */
  .pdf-cabecalho{
    display:flex !important; align-items:center; gap:12px; margin-bottom:26px;
    padding-bottom:18px; border-bottom: 2px solid #ECEFF5;
  }
  .pdf-cabecalho img{ width:44px; height:44px; border-radius:11px; }
  .pdf-cabecalho .pdf-marca{ font-family:"Manrope",sans-serif; font-weight:800; font-size:19px; color:#12151C; }
  .pdf-cabecalho .pdf-marca small{ display:block; font-weight:600; font-size:11px; color:#8A8FA3; letter-spacing:.06em; text-transform:uppercase; margin-top:1px; }

  .card-preview, .card-preview-premium{
    break-inside: avoid; page-break-inside: avoid; border:1.5px solid #E4E7F0 !important; border-radius:20px !important;
    box-shadow:none !important; background:#fff !important;
  }

  .qr-box{
    break-inside: avoid; page-break-inside: avoid; background:#fff !important; border:1.5px solid #E4E7F0 !important;
    border-radius:18px !important; padding:22px !important; margin:26px 0 4px !important;
  }
  .qr-box canvas, .qr-box img{ width:190px !important; height:190px !important; max-width:190px !important; }
  .pdf-only{
    display:block !important; text-align:center; font-size:12.5px; color:#6B7280;
    margin: 6px 0 30px; line-height:1.5;
  }
  .pdf-only b{ color:#12151C; }

  .pdf-rodape{
    display:flex !important; align-items:center; justify-content:space-between; gap:10px;
    margin-top:34px; padding-top:16px; border-top:1.5px solid #ECEFF5;
    font-size:11px; color:#9498B0;
  }
  .pdf-rodape .pdf-rodape-marca{ font-weight:800; color:#12151C; }
  .menu-item-row{
    break-inside: avoid; page-break-inside: avoid; background:#fff !important; border:none !important;
    border-bottom:1px solid #ECEFF5 !important; border-radius:0 !important; padding:14px 0 !important;
  }
  .mesas-grid{
    display:grid !important; grid-template-columns: 1fr 1fr !important; gap:14px !important;
  }
}

/* ---------- cartões de mesa (QR por mesa, para imprimir e recortar) ---------- */
.mesas-grid{ display:grid; grid-template-columns: 1fr 1fr; gap:16px; margin-top:18px; }
.mesa-card{
  break-inside: avoid; page-break-inside: avoid; background:#fff; border:1.5px solid #E4E7F0; border-radius:16px;
  overflow:hidden; text-align:center; box-shadow:none;
}
.mesa-card .mesa-card-qr{ padding:16px 16px 10px; }
.mesa-card .mesa-card-qr canvas, .mesa-card .mesa-card-qr img{ width:100% !important; height:auto !important; }
.mesa-card .mesa-card-instrucao{
  font-size:10.5px; color:#6B7280; padding:0 12px 14px; line-height:1.35;
}
.mesa-card .mesa-card-faixa{
  background:#12151C; color:#fff; padding:10px 8px; font-weight:800; font-size:14px;
  letter-spacing:.02em;
}


/* variante centrada — ecrã de login, ao estilo de apps como o Uzeka */
.hero-center{ text-align:center; padding: 34px 0 26px; }
.hero-center .logo-mark{
  width:52px; height:52px; border-radius:16px; background: var(--gold); color:#fff;
  display:flex; align-items:center; justify-content:center; font-size:20px; font-weight:800;
  margin: 0 auto 18px;
}
.hero-center h1{ text-align:center; }
.hero-center p{ margin-left:auto; margin-right:auto; }

/* selo de método de pagamento — Multicaixa Express / EMIS */
.metodo-pagamento-btn{
  display:flex; align-items:center; gap:14px; text-align:left; width:100%;
}
.metodo-pagamento-icon{
  width:42px; height:42px; border-radius:12px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center; font-size:20px;
  background: color-mix(in srgb, currentColor 14%, transparent);
}
.metodo-pagamento-texto{ flex:1; min-width:0; }
.metodo-pagamento-titulo{ font-weight:700; font-size:14.5px; }
.metodo-pagamento-desc{ font-size:12px; opacity:.85; margin-top:2px; font-weight:400; }
.selo-emis{
  display:inline-flex; align-items:center; gap:5px; margin-top:10px;
  font-size:10.5px; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
  color: var(--sand-dim);
}
.selo-emis .selo-emis-badge{
  background: var(--ink-3); color: var(--sand-dim); border-radius:5px; padding:2px 6px;
  font-size:9.5px; font-weight:800; letter-spacing:.03em;
}
.eyebrow{
  font-family: var(--font-body); font-weight:700; font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  color: var(--teal);
}

/* ---------- card preview (o "signature element") ---------- */
.card-preview{
  position: relative;
  border-radius: var(--radius-lg);
  padding: 22px 20px 18px;
  background: linear-gradient(160deg, var(--ink-3), var(--ink-2) 60%);
  border: 1px solid var(--ink-3);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}
.card-preview::before{
  content:"";
  position:absolute; inset: 0 0 auto 0; height: 3px;
  background: var(--gold);
}
.cp-top{ display:flex; align-items:flex-start; gap:14px; margin-top: 10px; }
.cp-photo{
  width:56px; height:56px; border-radius: var(--card-photo-radius, 14px); object-fit: cover;
  background: var(--ink); border: 1px solid var(--ink-3);
  display:flex; align-items:center; justify-content:center;
  font-family: var(--font-body); font-weight:800; font-size: 18px; color: var(--gold);
  flex-shrink:0;
}
.cp-name-row{ display:flex; align-items:center; gap:6px; }
.cp-name{ font-family: var(--font-body); font-weight:800; font-size:18px; line-height:1.2; }
.cp-check{
  width:16px; height:16px; border-radius:50%; background: var(--gold); color:#fff; flex-shrink:0;
  display:flex; align-items:center; justify-content:center; font-size:10px; font-weight:900;
}
.cp-role{
  display:inline-flex; align-items:center; gap:6px; margin-top:7px; padding:4px 10px 4px 8px; border-radius:999px;
  background: color-mix(in srgb, var(--gold) 16%, transparent); color: var(--gold);
  font-size: 11px; font-weight:800; letter-spacing:.04em; text-transform:uppercase;
}
.cp-role::before{ content:""; width:5px; height:5px; border-radius:50%; background: var(--gold); }
.cp-divider{ height:1px; background: var(--ink-3); margin: 16px 0 6px; }

.cp-info-row{ display:flex; align-items:center; gap:12px; padding: 8px 0; }
.cp-info-icon{
  width:34px; height:34px; border-radius:10px; background: var(--ink); border:1px solid var(--ink-3);
  display:flex; align-items:center; justify-content:center; font-size:14px; flex-shrink:0;
}
.cp-info-text{ min-width:0; }
.cp-info-label{ font-size:10.5px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color: var(--sand-dim); }
.cp-info-value{ font-size:14.5px; font-weight:700; color: var(--sand); margin-top:1px; }
.cp-info-value.link{ color: var(--gold); display:inline-flex; align-items:center; gap:5px; }

/* ---------- variante premium: mesma estrutura-base, ornamentos próprios ---------- */
.cp-content{ position:relative; z-index:1; }

.card-preview-premium{
  padding: 27px 22px 22px;
  box-shadow: 0 26px 60px -22px rgba(0,0,0,.65);
  border-color: var(--gold);
  border-width: 1.5px;
}
.card-preview-premium::before{
  background: linear-gradient(90deg, transparent, var(--gold) 25%, var(--gold) 75%, transparent);
  height: 4px;
}
.card-preview-premium .cp-photo{
  border: 2px solid var(--gold);
  box-shadow: none;
}
.card-preview-premium .cp-name{
  font-family: var(--font-display); font-weight:700; letter-spacing:.1px;
}
.card-preview-premium .cp-role{
  background: transparent; border: 1px solid var(--gold); color: var(--gold); padding: 3px 10px 3px 9px;
}
.card-preview-premium .cp-divider{
  height:0; border-top:1px solid var(--ink-3); position:relative; margin: 20px 0 10px;
}
.card-preview-premium .cp-divider::after{
  content:"✦"; position:absolute; left:50%; top:-8px; transform:translateX(-50%);
  background: var(--ink-2); color: var(--gold); font-size:11px; padding:0 9px;
}
/* Telefone/WhatsApp lado a lado nos templates premium; localização ocupa a linha toda */
.card-preview-premium .cp-rows{ display:grid; grid-template-columns:1fr 1fr; gap:2px 14px; }
.card-preview-premium .cp-rows .cp-info-row:nth-child(3){ grid-column: 1 / -1; }

/* Zona de arte decorativa (lado direito) — sempre atrás de .cp-content (z-index:1) */
.cp-art{
  position:absolute; inset:0; pointer-events:none; overflow:hidden;
  -webkit-mask-image: linear-gradient(to left, black 35%, transparent 78%);
  mask-image: linear-gradient(to left, black 35%, transparent 78%);
}
.cp-art-beam{
  background: linear-gradient(115deg,
    transparent 38%, var(--gold) 46%, transparent 54%,
    transparent 66%, var(--gold-dim) 72%, transparent 80%);
  opacity:.4;
}
.cp-art-dots{
  background-image: radial-gradient(circle, var(--gold) 1.3px, transparent 1.6px);
  background-size: 11px 11px;
  opacity:.55;
}
.cp-art-waves{
  background:
    repeating-linear-gradient(70deg, transparent 0 10px, var(--gold) 10px 11px, transparent 11px 22px),
    repeating-linear-gradient(58deg, transparent 0 16px, var(--gold-dim) 16px 17px, transparent 17px 32px);
  opacity:.4;
}
.cp-art-hex{
  background-image:
    repeating-linear-gradient(60deg, var(--gold) 0 1.5px, transparent 1.5px 26px),
    repeating-linear-gradient(-60deg, var(--gold) 0 1.5px, transparent 1.5px 26px),
    repeating-linear-gradient(0deg, var(--gold) 0 1.5px, transparent 1.5px 26px);
  opacity:.22;
}

/* ---------- Neon Tokyo — grelha cyberpunk com glow ---------- */
.card-preview.special-neon{
  box-shadow: 0 0 0 1px var(--gold), 0 0 22px -4px var(--gold), 0 0 40px -10px var(--teal), 0 26px 60px -22px rgba(0,0,0,.7);
}
.card-preview.special-neon::before{
  background: linear-gradient(90deg, var(--gold), var(--teal));
  height:3px; box-shadow: 0 0 10px var(--gold);
}
.card-preview.special-neon::after{
  content:"";
  position:absolute; inset:0; pointer-events:none;
  background-image:
    repeating-linear-gradient(90deg, var(--gold) 0 1px, transparent 1px 22px),
    repeating-linear-gradient(0deg, var(--teal) 0 1px, transparent 1px 22px);
  opacity:.28;
  -webkit-mask-image: linear-gradient(to top, black, transparent 75%);
  mask-image: linear-gradient(to top, black, transparent 75%);
}
.card-preview.special-neon .cp-name{
  text-shadow: 0 0 10px var(--gold), 0 0 22px color-mix(in srgb, var(--gold) 60%, transparent);
}
.card-preview.special-neon .cp-photo{
  border: 1.5px solid var(--teal); box-shadow: 0 0 12px -2px var(--teal);
}
.card-preview.special-neon .cp-check{ background: var(--teal); box-shadow: 0 0 8px var(--teal); }

/* ---------- Holograma — gradiente iridescente animado ---------- */
.card-preview.special-holo{
  background: linear-gradient(120deg, #FBCFE8, #C4B5FD, #A5F3FC, #FDE68A, #FBCFE8);
  background-size: 300% 300%;
  animation: holoShift 9s ease-in-out infinite;
  border-color: rgba(124,58,237,.35);
}
.card-preview.special-holo::before{
  background: linear-gradient(90deg, #EC4899, #7C3AED, #06B6D4, #F59E0B);
  height:4px;
}
.card-preview.special-holo .cp-photo{ border-color: var(--gold); background: rgba(255,255,255,.5); }
@keyframes holoShift{
  0%,100%{ background-position: 0% 50%; }
  50%{ background-position: 100% 50%; }
}

/* ---------- Polaroid Vintage — papel, moldura e fita ---------- */
.card-preview.special-polaroid{
  transform: rotate(-1.3deg);
  padding: 16px 16px 32px;
  border: none;
  box-shadow: 0 20px 36px -16px rgba(30,20,5,.35), 0 1px 0 rgba(0,0,0,.05);
}
.card-preview.special-polaroid::before{ display:none; }
.card-preview.special-polaroid::after{
  content:"";
  position:absolute; top:-11px; left:50%; transform:translateX(-50%) rotate(-3deg);
  width:64px; height:20px; background: rgba(255,240,170,.55); border:1px solid rgba(0,0,0,.04);
}
.card-preview.special-polaroid .cp-photo{ border:1px solid var(--ink-3); border-radius:4px; }
.card-preview.special-polaroid .cp-name{ font-family: var(--font-display); font-style:italic; font-weight:600; }
.card-preview.special-polaroid .cp-role{ border-color: var(--gold-dim); }

/* Texturas — sempre atrás de .cp-content (z-index:1), nunca tapam o texto */
.card-pattern-atlantico::after{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.16;
  background-image:
    repeating-linear-gradient(45deg, var(--gold) 0 2px, transparent 2px 15px),
    repeating-linear-gradient(-45deg, var(--gold) 0 2px, transparent 2px 15px);
}

.card-pattern-aquarela::after{
  content:""; position:absolute; inset:-20%; pointer-events:none; opacity:.5; filter: blur(18px);
  background:
    radial-gradient(circle at 15% 20%, var(--gold) 0%, transparent 40%),
    radial-gradient(circle at 88% 10%, var(--teal) 0%, transparent 45%),
    radial-gradient(circle at 75% 90%, var(--clay) 0%, transparent 45%);
}

.card-pattern-cosmos::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(1px 1px at 18% 28%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 62% 12%, #fff 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 82% 55%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 38% 78%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 92% 82%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 8% 65%, #fff 50%, transparent 51%),
    radial-gradient(circle at 25% 35%, var(--gold) 0%, transparent 55%),
    radial-gradient(circle at 78% 75%, var(--clay) 0%, transparent 50%);
  opacity:.5;
}

/* ---------- form ---------- */
.field{ margin-bottom: 14px; }
.field label{
  display:block; font-size:12.5px; font-weight:700; color: var(--sand-dim);
  letter-spacing:.03em; margin-bottom: 6px;
}
.field input, .field textarea{
  width:100%; background: var(--ink-2); border: 1.5px solid var(--ink-3); color: var(--sand);
  padding: 13px 14px; border-radius: var(--radius-lg); font-size: 15px; font-family: inherit;
  outline: none;
}
/* Android desenha os campos de data/hora com segmentos internos (dia/mês/ano,
   hora/minuto) que precisam de altura e largura mínimas garantidas — sem
   isto, o valor ou o "OK" do seletor pode ficar cortado fora do campo. */
.field input[type="date"], .field input[type="time"]{
  min-height:48px; width:100%; min-width:0; color-scheme: light;
}
/* Seletor de hora próprio (hora + minuto em <select>) — não depende do
   relógio nativo do telemóvel, que em alguns Android aparece com o botão
   de confirmar fora do ecrã e impede guardar a hora escolhida. */
.hora-picker{ display:flex; align-items:center; gap:8px; }
.hora-picker select{
  flex:1; background: var(--ink-2); border: 1.5px solid var(--ink-3); color: var(--sand);
  padding: 13px 10px; border-radius: var(--radius-lg); font-size: 15px; font-family: inherit;
  outline: none; appearance: none; -webkit-appearance: none; text-align:center;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23949AB0' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position: right 10px center; background-size:16px; padding-right:30px;
}
.hora-picker select:focus{ border-color: var(--gold); box-shadow: 0 0 0 3px color-mix(in srgb, var(--gold) 16%, transparent); }
.hora-picker .dois-pontos{ font-weight:800; font-size:18px; color: var(--sand-dim); }
.field input:focus, .field textarea:focus{ border-color: var(--gold); box-shadow: 0 0 0 3px color-mix(in srgb, var(--gold) 16%, transparent); }
.field .hint{ font-size: 12px; color: var(--sand-dim); opacity:.75; margin-top:5px; }
.field .err{ font-size: 12.5px; color: var(--danger); margin-top: 5px; display:none; }
.field.invalid input{ border-color: var(--danger); }
.field.invalid .err{ display:block; }

/* campo de telefone com bandeira — usado no login */
.field-tel{
  display:flex; align-items:stretch; gap:8px;
  background: var(--ink-2); border: 1.5px solid var(--ink-3); border-radius: var(--radius-lg);
  padding: 4px 4px 4px 14px;
}
.field-tel:focus-within{ border-color: var(--gold); box-shadow: 0 0 0 3px color-mix(in srgb, var(--gold) 16%, transparent); }
.field-tel .bandeira{ display:flex; align-items:center; gap:6px; font-size:19px; padding-right:8px; border-right:1.5px solid var(--ink-3); flex-shrink:0; }
.field-tel .bandeira small{ font-size:11px; color: var(--sand-dim); font-weight:700; }
.field-tel input{
  flex:1; min-width:0; background:none; border:none; color: var(--sand);
  padding: 13px 10px 13px 0; font-size: 15px; font-family: inherit; outline:none;
}

.photo-upload{ display:flex; align-items:center; gap:14px; }
.photo-thumb{
  width:64px; height:64px; border-radius:16px; background: var(--ink-2); border:1px dashed var(--ink-3);
  display:flex; align-items:center; justify-content:center; overflow:hidden; flex-shrink:0; color: var(--sand-dim); font-size:11px;
}
.photo-thumb img{ width:100%; height:100%; object-fit:cover; }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  width:100%; padding: 16px 18px; border-radius: 999px;
  font-weight:700; font-size: 15px; border:none; cursor:pointer;
  transition: transform .08s ease;
  text-decoration: none;
}
.btn:active{ transform: scale(.985); }
.btn-primary{ background: var(--gold); color: #fff; }
.btn-primary:hover{ filter: brightness(1.06); }
.btn-secondary{ background: var(--ink-2); color: var(--sand); border:1px solid var(--ink-3); }
.btn-whatsapp{ background: #21A15A; color: #fff; }
.btn-call{ background: var(--teal); color: #fff; }
.btn-outline{ background: transparent; color: var(--sand); border:1px solid var(--ink-3); }
.btn-row{ display:flex; gap:10px; }
.btn-row .btn{ width:auto; flex:1; }
.btn[disabled]{ opacity:.55; pointer-events:none; }
.btn-link{
  background:none; border:none; color: var(--sand-dim); font-size:13.5px; text-decoration: underline;
  cursor:pointer; padding: 6px 0;
}

.btn-icon{ font-size:16px; line-height:1; }

/* ---------- dashboard: estatísticas ---------- */
.stat-grid{ display:flex; gap:12px; margin: 16px 0; }
.stat-box{
  flex:1; background: var(--ink-2); border:1px solid var(--ink-3); border-radius: var(--radius-md);
  padding: 16px 16px 14px;
}
.stat-num{ font-family: var(--font-body); font-weight:800; font-size:26px; color: var(--sand); }
.stat-label{ font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color: var(--sand-dim); margin-top:4px; }
.stat-note{ font-size: 11.5px; color: var(--sand-dim); opacity:.7; margin: -10px 0 6px; }

.app-footer{
  text-align:center; font-size:11px; letter-spacing:.12em; text-transform:uppercase;
  color: var(--sand-dim); opacity:.55; padding: 28px 0 8px;
}

/* ---------- hub ---------- */
.hub-item{
  display:flex; align-items:center; gap:14px; width:100%; text-align:left;
  background: var(--ink-2); border:1px solid var(--ink-3); border-radius: var(--radius-md);
  padding: 16px; margin-bottom:12px; cursor:pointer; color: var(--sand); font-family: inherit;
  transition: transform .1s ease, box-shadow .15s ease;
}
.hub-item:active{ transform: scale(.98); box-shadow: var(--shadow-card); }
.hub-item-icon{ font-size:22px; width:42px; height:42px; border-radius:12px; background: var(--ink); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.hub-item-text{ flex:1; min-width:0; }
.hub-item-titulo{ font-weight:700; font-size:14.5px; }
.hub-item-nome{ font-size:12.5px; color: var(--sand-dim); margin-top:2px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.hub-item-arrow{ color: var(--sand-dim); font-size:16px; }

/* ---------- escolher tipo ---------- */
.tipo-card{
  display:flex; align-items:center; gap:14px; width:100%; text-align:left;
  background: var(--ink-2); border:1px solid var(--ink-3); border-radius: var(--radius-lg);
  padding: 18px; margin-bottom:14px; cursor:pointer; color: var(--sand); font-family: inherit;
  transition: transform .1s ease, box-shadow .15s ease;
}
.tipo-card:active{ transform: scale(.98); box-shadow: var(--shadow-card); }
.tipo-card-icon{ font-size:26px; width:52px; height:52px; border-radius:14px; background: var(--ink); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.tipo-card-text{ flex:1; min-width:0; }
.tipo-card-titulo{ font-weight:800; font-size:15px; display:flex; align-items:center; gap:8px; }
.tipo-card-desc{ font-size:12.5px; color: var(--sand-dim); margin-top:3px; line-height:1.4; }
.tipo-card-arrow{ color: var(--sand-dim); font-size:18px; }
.tipo-card-tag{
  font-size:9.5px; font-weight:800; text-transform:uppercase; letter-spacing:.04em;
  background: var(--gold); color:#fff; padding:2px 7px; border-radius:999px;
}

/* ---------- chips (tipo de evento) ---------- */
.chip-row{ display:flex; flex-wrap:wrap; gap:8px; }
.chip{
  background: var(--ink-2); border:1.5px solid var(--ink-3); color: var(--sand-dim);
  padding: 8px 13px; border-radius:999px; font-size:13px; font-weight:600; cursor:pointer; font-family:inherit;
}
.chip.selected{ background: var(--gold); border-color: var(--gold); color:#fff; }

/* ---------- rsvp ---------- */
.rsvp-item{ background: var(--ink-2); border:1px solid var(--ink-3); border-radius: var(--radius-md); padding:14px 16px; margin-bottom:10px; }
.rsvp-item-top{ display:flex; align-items:center; justify-content:space-between; }
.rsvp-nome{ font-weight:700; font-size:14.5px; }
.rsvp-badge{ font-size:10.5px; font-weight:800; text-transform:uppercase; padding:3px 9px; border-radius:999px; }
.rsvp-badge.yes{ background: color-mix(in srgb, #21A15A 20%, transparent); color:#3FCB7C; }
.rsvp-badge.no{ background: color-mix(in srgb, var(--danger) 20%, transparent); color: var(--danger); }
.rsvp-badge.maybe{ background: color-mix(in srgb, var(--gold) 20%, transparent); color: var(--gold); }

/* ---------- pagamento (overlay) ---------- */
.pagamento-overlay{
  position:fixed; inset:0; z-index:80; background: rgba(0,0,0,.6);
  display:flex; align-items:flex-end; justify-content:center;
}
.pagamento-painel{
  width:100%; max-width:480px; background: var(--ink-2); border-top:1px solid var(--ink-3);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0; padding: 22px 20px 28px;
}

/* ---------- planos ---------- */
.plano-aviso{
  background: color-mix(in srgb, var(--danger) 14%, transparent); border:1px solid var(--danger);
  color: var(--sand); font-size:13px; border-radius: var(--radius-md); padding:12px 14px; margin-bottom:16px; line-height:1.4;
}
.plano-aviso-info{
  background: color-mix(in srgb, var(--gold) 14%, transparent); border:1px solid var(--gold);
  color: var(--sand); font-size:13px; border-radius: var(--radius-md); padding:12px 14px; margin-bottom:16px; line-height:1.4;
}
.uso-card{ background: var(--ink-2); border:1px solid var(--ink-3); border-radius: var(--radius-md); padding:16px; margin-bottom:8px; }
.uso-label{ font-size:12px; font-weight:700; color: var(--sand-dim); margin-bottom:6px; }
.uso-linha{ display:flex; align-items:center; gap:10px; }
.uso-barra{ flex:1; height:8px; border-radius:999px; background: var(--ink-3); overflow:hidden; }
.uso-preenchido{ height:100%; background: var(--gold); border-radius:999px; }
.uso-texto{ font-size:12px; font-weight:700; color: var(--sand); white-space:nowrap; }

.plano-card{
  position:relative; background: var(--ink-2); border:1.5px solid var(--ink-3); border-radius: var(--radius-lg);
  padding:20px 18px; margin-bottom:14px; transition: box-shadow .2s ease;
}
.plano-card.atual{
  border-color: var(--gold);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--gold) 14%, transparent), var(--shadow-card);
}
.plano-badge-atual{
  position:absolute; top:-10px; right:16px; background: var(--gold); color:#fff;
  font-size:10.5px; font-weight:800; text-transform:uppercase; padding:4px 10px; border-radius:999px;
}
.plano-nome{ font-family: var(--font-display); font-weight:700; font-size:18px; }
.plano-preco{ font-size:24px; font-weight:800; margin:4px 0 12px; }
.plano-preco span{ font-size:13px; font-weight:600; color: var(--sand-dim); }
.plano-lista{ list-style:none; padding:0; margin:0 0 16px; display:flex; flex-direction:column; gap:7px; }
.plano-lista li{ font-size:13px; color: var(--sand-dim); }
.rsvp-meta{ font-size:12.5px; color: var(--sand-dim); margin-top:4px; }
.rsvp-msg{ font-size:13px; color: var(--sand); font-style:italic; margin-top:8px; opacity:.85; }

/* ---------- menu: gestão de itens ---------- */
.menu-item-row{
  display:flex; align-items:center; gap:12px; background: var(--ink-2); border:1px solid var(--ink-3);
  border-radius: var(--radius-md); padding:10px 12px; margin-bottom:10px;
}
.menu-item-foto{ width:46px; height:46px; border-radius:10px; object-fit:cover; flex-shrink:0; }
.menu-item-foto-vazia{ display:flex; align-items:center; justify-content:center; background: var(--ink); font-size:18px; }
.menu-item-info{ flex:1; min-width:0; }
.menu-item-nome{ font-weight:700; font-size:14px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.menu-item-cat{ font-size:11.5px; color: var(--sand-dim); margin-top:1px; }
.menu-item-preco{ font-weight:700; font-size:13.5px; color: var(--gold); white-space:nowrap; }

/* ---------- menu: vista pública ---------- */
.menu-public-item{ display:flex; align-items:center; gap:12px; padding:12px 0; border-bottom:1px solid var(--ink-3); }
.menu-public-foto{ width:52px; height:52px; border-radius:10px; object-fit:cover; flex-shrink:0; }
.menu-public-info{ flex:1; min-width:0; }
.menu-public-nome{ font-weight:700; font-size:14.5px; }
.menu-public-desc{ font-size:12.5px; color: var(--sand-dim); margin-top:2px; line-height:1.4; }
.menu-public-preco{ font-weight:800; font-size:13.5px; color: var(--gold); white-space:nowrap; margin-top:4px; }

/* seletor de quantidade por prato */
.qty-stepper{
  display:flex; align-items:center; gap:9px; background: var(--ink-2); border:1px solid var(--ink-3);
  border-radius:999px; padding:4px; flex-shrink:0;
}
.qty-btn{
  width:26px; height:26px; border-radius:50%; border:none; background: var(--ink-3); color: var(--sand);
  font-size:16px; font-weight:700; cursor:pointer; display:flex; align-items:center; justify-content:center; line-height:1;
}
.qty-btn:active{ background: var(--gold); color:#fff; }
.qty-valor{ min-width:16px; text-align:center; font-weight:700; font-size:14px; }

/* barra fixa de pedido, no fundo do ecrã */
.cart-bar{
  position:fixed; left:0; right:0; bottom:0; z-index:40;
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  max-width:480px; margin:0 auto; padding:14px 18px;
  background: var(--ink-2); border-top:1px solid var(--ink-3);
  box-shadow: 0 -12px 30px -10px rgba(0,0,0,.4);
}
.cart-bar-itens{ font-size:11.5px; color: var(--sand-dim); font-weight:700; text-transform:uppercase; letter-spacing:.04em; }
.cart-bar-total{ font-size:17px; font-weight:800; color: var(--sand); }

/* barra fixa genérica para ações "Continuar" no fundo de ecrãs com listas longas
   (ex: escolher template) — o botão principal fica sempre alcançável, mesmo que
   o conteúdo por cima seja comprido. */
.sticky-cta-bar{
  position:fixed; left:0; right:0; bottom:0; z-index:40;
  max-width:480px; margin:0 auto;
  padding: 12px 18px calc(14px + env(safe-area-inset-bottom, 0px));
  background: var(--ink-2); border-top:1px solid var(--ink-3);
  box-shadow: 0 -12px 30px -10px rgba(0,0,0,.4);
}
.sticky-cta-bar .btn{ margin:0; }

/* ---------- qr / share ---------- */
.qr-box{
  background: #fff; border: 1px solid var(--ink-3); border-radius: var(--radius-lg); padding: 18px;
  display:flex; align-items:center; justify-content:center; margin: 18px 0;
}
.qr-box img{ width: 190px; height:190px; }
.link-box{
  display:flex; align-items:center; gap:10px; background: var(--ink-2); border:1px solid var(--ink-3);
  border-radius: var(--radius-md); padding: 12px 14px; font-size: 13.5px; color: var(--sand-dim);
  margin-bottom: 16px;
}
.link-box span{ flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color: var(--sand); }

/* ---------- misc ---------- */
.section-title{ font-family: var(--font-display); font-size: 20px; font-weight:700; margin: 26px 0 12px; }
.spacer{ height: 18px; }
.center-note{ text-align:center; color: var(--sand-dim); font-size: 13.5px; padding: 30px 10px; }
.loading{ display:flex; align-items:center; justify-content:center; padding: 60px 0; color: var(--sand-dim); }
.spin{
  width:26px; height:26px; border-radius:50%; border: 3px solid var(--ink-3); border-top-color: var(--gold);
  animation: spin .8s linear infinite; margin-right:10px;
}
@keyframes spin{ to{ transform: rotate(360deg); } }

.toast{
  position: fixed; left:50%; bottom: 22px; transform: translateX(-50%) translateY(140%);
  background: var(--ink-3); color: var(--sand); border:1px solid var(--gold-dim);
  padding: 12px 18px; border-radius: 999px; font-size: 13.5px; z-index: 999;
  transition: transform .25s ease; box-shadow: var(--shadow-card);
  max-width: 90vw; text-align:center;
}
.toast.show{ transform: translateX(-50%) translateY(0); }

/* ---------- seletor de templates ---------- */
.tpl-option{
  border-radius: var(--radius-lg); overflow:hidden; margin-bottom:16px;
  border: 2px solid transparent; cursor:pointer; transition: border-color .15s ease;
  background: var(--ink-2);
}
.tpl-option.selected{ border-color: var(--gold); }
.tpl-option .tpl-swatch{ padding: 16px 16px 4px; }
.tpl-option .tpl-meta{ display:flex; align-items:center; justify-content:space-between; padding: 12px 18px 16px; }
.tpl-option .tpl-nome{ font-family: var(--font-display); font-weight:700; font-size:16px; }
.tpl-option .tpl-desc{ font-size: 12.5px; color: var(--sand-dim); margin-top:2px; }
.tpl-chevron{
  width:24px; height:24px; border-radius:50%; border:2px solid var(--sand-dim); color: var(--sand-dim);
  display:flex; align-items:center; justify-content:center; flex-shrink:0; font-size:14px;
  transition: transform .25s ease, border-color .2s ease, color .2s ease, background .2s ease;
}
.tpl-chevron.open{ transform: rotate(180deg); background: var(--gold); border-color: var(--gold); color:#fff; }

.tpl-premium-badge{
  position:absolute; top:12px; right:12px; z-index:2;
  display:flex; align-items:center; gap:4px;
  background: linear-gradient(135deg, #FFD97A, #E8A93B);
  color:#3A2A05; font-size:10.5px; font-weight:800; letter-spacing:.03em;
  padding: 4px 9px 4px 7px; border-radius:999px; box-shadow: 0 2px 8px rgba(0,0,0,.35);
}
.tpl-option{ position:relative; }
.tpl-option.premium .tpl-meta{ opacity:.9; }

/* Painel expansível (accordion) — abre/fecha em altura sem precisar de medir em JS */
.tpl-expand{ display:grid; grid-template-rows: 0fr; transition: grid-template-rows .3s ease; }
.tpl-expand.open{ grid-template-rows: 1fr; }
.tpl-expand-inner{ overflow:hidden; }
.tpl-expand-content{ padding: 0 18px 16px; }
.tpl-tip{
  font-size: 12.5px; color: var(--sand); background: var(--ink-3); border-radius: var(--radius-sm);
  padding: 10px 12px; line-height:1.4;
}
.tpl-lock-note{
  display:flex; align-items:center; gap:6px; font-size:12px; color: var(--gold); margin-top:8px;
}

/* Pequeno "pulso" ao selecionar um template novo */
@keyframes tplPulse{
  0%{ transform: scale(1); }
  35%{ transform: scale(1.025); }
  100%{ transform: scale(1); }
}
.tpl-swatch.pulse{ animation: tplPulse .4s ease; }

/* ---------- ecrã de entrada ---------- */
.entrar-box{ margin-top: 8px; }
.divider-or{
  display:flex; align-items:center; gap:12px; color: var(--sand-dim); font-size:12px;
  text-transform:uppercase; letter-spacing:.08em; margin: 18px 0;
}
.divider-or::before, .divider-or::after{ content:""; flex:1; height:1px; background: var(--ink-3); }

.badge-empty{
  border: 1px dashed var(--ink-3); border-radius: var(--radius-lg); padding: 34px 20px;
  text-align:center; color: var(--sand-dim); font-size: 14px;
}

@media (min-width: 540px){
  .hero h1{ font-size: 40px; }
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration: .001ms !important; transition-duration: .001ms !important; }
}