/* Commerce presentation layer. Business actions and permissions stay in the existing services. */
.offer-summary { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; margin:24px 0; }
.offer-summary article { padding:20px; border:1px solid var(--border); border-radius:16px; background:var(--surface); }
.offer-summary strong { color:var(--text); font-size:1.05rem; }
.offer-summary p { margin:8px 0 0; color:var(--muted); }
.editor-intro { max-width:650px; margin-bottom:24px; }
.editor-intro h2 { margin:12px 0 8px; }
.editor-presets { display:flex; align-items:center; flex-wrap:wrap; gap:12px; padding:16px; background:var(--soft); border-radius:16px; margin:18px 0; }
.editor-presets label { margin:0; }
.editor-presets input[type=color] { width:90px; min-height:44px; }
.editor-presets .button { min-height:44px; }
.company-logo-preview,.public-business-logo { width:100px; height:100px; object-fit:contain; padding:10px; background:#fff; border:1px solid var(--border); border-radius:16px; margin-bottom:18px; }
.public-business-logo { display:block; margin:0 auto 24px; border-top:3px solid var(--business-accent); }
.print-preview { display:flex; justify-content:center; gap:20px; flex-wrap:wrap; padding:18px; background:var(--soft); border-radius:16px; }
.print-preview img { max-width:260px; width:100%; height:auto; box-shadow:0 8px 24px #0002; }
.editor-stage { max-height:740px; }
.editor-layout > * { min-width:0; }
@media(max-width:760px){.offer-summary{grid-template-columns:1fr}.editor-presets{gap:10px}.editor-presets>label{flex:1 1 130px}.editor-presets>.button{flex:1 1 140px}}
:root {
  --bg:#f7f8fa; --surface:#fff; --soft:#f1f4f8; --text:#182337; --muted:#67758a;
  --border:#e2e7ef; --brand:#2160db; --brand-soft:#edf3ff; --radius:20px;
  --shadow:0 5px 25px #172a4805; --hero-ink:#11213d;
}
.dark {
  --bg:#0b101a; --surface:#131c2b; --soft:#1a2537; --text:#f0f4fc; --muted:#a4b2c8;
  --border:#27354b; --brand:#91b5ff; --brand-soft:#1b3154; --hero-ink:#ecf2ff;
}
html { scroll-behavior:smooth; scroll-padding-top:100px; }
body { font-family:Inter,"Segoe UI",system-ui,sans-serif; font-size:15px; line-height:1.6; }
h1,h2,h3 { color:var(--text); line-height:1.18; }
h1 { letter-spacing:-.045em; font-weight:750; }
h2 { letter-spacing:-.035em; font-weight:750; }
.ui-icon { width:21px; height:21px; flex-shrink:0; display:inline-block; vertical-align:middle; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.button { display:inline-flex; align-items:center; justify-content:center; gap:9px; min-height:46px; border-radius:12px; font-size:.87rem; font-weight:650; padding:11px 17px; line-height:1.4; }
.button.primary { color:white; background:#2160db; border-color:#2160db; box-shadow:0 3px 8px #2160db16; }
.button.primary:hover:not(:disabled) { background:#184fc0; border-color:#184fc0; }
.button.subtle { background:var(--surface); border:1px solid var(--border); color:var(--text); }
.button.subtle:hover:not(:disabled) { background:var(--soft); border-color:var(--muted); }
.button:disabled { opacity:.5; box-shadow:none; cursor:not-allowed; }
a,button,input,select,textarea { -webkit-tap-highlight-color:transparent; }
:focus-visible { outline:3px solid #759fee; outline-offset:3px; }
.eyebrow { color:var(--muted); font-size:.68rem; letter-spacing:.14em; font-weight:750; }
.card { border:1px solid var(--border); box-shadow:var(--shadow); }
.skip-link { position:fixed; top:8px; left:16px; z-index:100; padding:12px 20px; background:var(--surface); color:var(--text); border:1px solid var(--brand); border-radius:10px; transform:translateY(-150%); }
.skip-link:focus { transform:none; }
.app-header { height:78px; padding:0 max(24px,calc((100vw - 1400px)/2)); background:var(--surface); border-bottom:1px solid var(--border); }
.brand { gap:10px; font-size:1.03rem; line-height:1.3; letter-spacing:-.03em; }
.brand-mark { width:36px; height:36px; object-fit:contain; border-radius:10px; }
.brand small { color:var(--muted); font-size:.72rem; font-weight:500; letter-spacing:.02em; }
.header-actions { gap:12px; }
.header-home { display:flex; align-items:center; gap:6px; color:var(--muted); min-height:44px; font-size:.8rem; font-weight:550; margin-right:12px; }
.header-home:hover { color:var(--text); }
.icon-button { min-width:44px; min-height:44px; border-radius:12px; color:var(--muted); border-color:var(--border); }
.product-pill { display:inline-flex; align-items:center; gap:8px; border:1px solid var(--border); background:var(--surface); color:var(--muted); border-radius:30px; padding:6px 12px; font-size:.75rem; font-weight:650; }
.product-pill .ui-icon { width:16px; height:16px; color:var(--brand); }
.commerce-landing { max-width:1240px; margin:auto; padding:64px 28px 0; }
.commerce-hero { display:grid; grid-template-columns:1fr 1.05fr; gap:64px; align-items:center; margin-bottom:58px; }
.hero-copy h1 { margin:26px 0 22px; font-size:clamp(3.4rem,5.6vw,5rem); line-height:1.06; color:var(--hero-ink); }
.hero-copy h1 span { color:var(--brand); }
.hero-copy>p { color:var(--muted); max-width:470px; font-size:1.04rem; line-height:1.75; }
.hero-actions { margin-top:28px; gap:10px; }
.hero-actions .button { min-height:50px; padding:13px 20px; }
.hero-reassurance { display:flex; flex-wrap:wrap; gap:8px 18px; margin-top:25px; color:var(--muted); font-size:.72rem; }
.hero-reassurance span { display:flex; align-items:center; gap:6px; }
.hero-reassurance .ui-icon { width:15px; color:var(--good); }
.product-showcase { background:var(--soft); border:1px solid var(--border); border-radius:28px; padding:22px; position:relative; }
.showcase-caption { display:flex; align-items:center; gap:7px; font-size:.7rem; font-weight:600; color:var(--muted); margin-bottom:18px; }
.live-dot { width:7px; height:7px; background:#6e9c91; border-radius:50%; }
.example-label { font-size:.6rem; margin-left:auto; padding:3px 7px; border:1px solid var(--border); border-radius:20px; }
.showcase-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.showcase-card { border-radius:18px; overflow:hidden; }
.physical-card { grid-column:1/-1; background:#142544; color:#fff; padding:24px 28px; position:relative; box-shadow:0 12px 20px #091d3920; }
.physical-card::after { content:""; position:absolute; width:240px; height:240px; border:1px solid #ffffff10; border-radius:50%; right:-80px; top:-130px; pointer-events:none; }
.physical-heading { display:flex; align-items:center; gap:9px; font-size:.84rem; font-weight:650; position:relative; z-index:1; }
.physical-heading small { display:block; color:#b7c6df; font-size:.58rem; font-weight:400; margin-top:2px; }
.physical-heading>.ui-icon { margin-left:auto; color:#c5d5f3; }
.mini-brand { display:grid; place-items:center; width:34px; height:34px; border:1px solid #9bb3d75c; border-radius:10px; font-family:Georgia,serif; font-size:1.1rem; }
.physical-card h2 { margin:28px 0 4px; font-size:2rem; color:#fff; letter-spacing:-.04em; }
.physical-bottom { display:flex; justify-content:space-between; gap:15px; align-items:end; }
.physical-bottom p { color:#edf3ff; font-size:.84rem; margin:0; line-height:1.6; }
.physical-bottom p span { display:block; color:#b7c6df; font-size:.59rem; margin-top:15px; }
.product-showcase .showcase-grid { grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
.product-showcase .showcase-card { min-width:0; }
.product-showcase .physical-card { width:100%; min-width:0; grid-column:1; grid-row:1 / span 2; aspect-ratio:1 / 2; min-height:440px; display:flex; flex-direction:column; border:5px solid #e8eef6; border-radius:10px; padding:18px; }
.product-showcase .physical-card h2 { font-size:clamp(1.2rem,2vw,1.7rem); margin:26px 0 18px; }
.product-showcase .physical-heading { flex-wrap:wrap; font-size:.72rem; }
.product-showcase .physical-bottom { flex-direction:column-reverse; align-items:center; margin-top:auto; }
.product-showcase .physical-bottom p { text-align:center; font-size:.72rem; }
.product-showcase .example-qr { width:100%; max-width:110px; }
.product-showcase .review-preview,.product-showcase .menu-preview { grid-column:2; }
@media(max-width:1000px){
  .product-showcase .physical-card { grid-column:1 / -1; grid-row:auto; max-width:230px; justify-self:center; min-height:460px; }
  .product-showcase .review-preview,.product-showcase .menu-preview { grid-column:auto; }
}
.example-qr { width:93px; padding:7px; background:#fff; border-radius:10px; flex-shrink:0; }
.example-qr svg { display:block; width:100%; height:auto; }
.review-preview,.menu-preview { padding:17px; border:1px solid var(--border); background:var(--surface); display:flex; flex-direction:column; gap:13px; }
.preview-icon { display:grid; place-items:center; width:35px; height:35px; background:var(--brand-soft); color:var(--brand); border-radius:10px; }
.review-preview .preview-icon { color:#b88216; background:#fff2d7; }
.dark .review-preview .preview-icon { background:#382f1f; color:#ecc076; }
.showcase-card small { font-size:.56rem; letter-spacing:.09em; color:var(--muted); font-weight:650; }
.physical-heading small { color:#b7c6df; letter-spacing:0; font-weight:400; }
.showcase-card strong { display:block; font-size:.85rem; letter-spacing:-.02em; margin:4px 0 7px; }
.decorative-stars { color:#ba8726; font-size:1.07rem; letter-spacing:3px; }
.review-preview p { font-size:.67rem; color:var(--muted); line-height:1.5; margin:7px 0 0; }
.sample-menu-row { display:flex; align-items:center; gap:4px; font-size:.62rem; padding:8px 0; border-top:1px solid var(--border); color:var(--muted); }
.sample-menu-row .ui-icon { width:12px; height:12px; margin-left:auto; }
.showcase-footer { display:flex; align-items:center; justify-content:center; gap:7px; color:var(--muted); font-size:.69rem; margin-top:16px; }
.showcase-footer .ui-icon { width:15px; height:15px; }
.feature-strip { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; border-top:1px solid var(--border); border-bottom:1px solid var(--border); padding:26px 0; }
.feature-strip article { display:flex; align-items:flex-start; gap:12px; }
.feature-strip article>.ui-icon { color:var(--brand); margin-top:3px; width:22px; height:22px; }
.feature-strip h2 { font-size:.86rem; line-height:1.4; letter-spacing:-.01em; margin:0 0 6px; }
.feature-strip p { font-size:.76rem; color:var(--muted); line-height:1.65; margin:0; max-width:260px; }
.access-layout { display:grid; grid-template-columns:1fr .9fr; gap:100px; padding:78px 0 64px; align-items:start; }
.getting-started>h2 { font-size:2.6rem; margin:15px 0 32px; }
.start-steps { padding:0; list-style:none; display:flex; flex-direction:column; gap:27px; }
.start-steps li { display:flex; gap:18px; }
.start-steps li>span { flex-shrink:0; display:grid; place-items:center; background:var(--surface); border:1px solid var(--border); border-radius:14px; width:44px; height:44px; font-size:.72rem; color:var(--brand); font-weight:700; }
.start-steps h3 { font-size:.93rem; margin:2px 0 7px; }
.start-steps p { font-size:.83rem; line-height:1.7; color:var(--muted); margin:0; max-width:370px; }
.purchase-note { display:flex; align-items:start; gap:10px; color:var(--muted); font-size:.76rem; line-height:1.7; margin:30px 0 0; max-width:430px; }
.purchase-note .ui-icon { margin-top:2px; }
.auth-card { padding:32px; border-radius:24px; box-shadow:0 10px 40px #18233707; scroll-margin-top:95px; }
.auth-intro-icon { display:grid; place-items:center; width:44px; height:44px; background:var(--brand-soft); color:var(--brand); border-radius:13px; margin-bottom:22px; }
.auth-card h2 { font-size:1.55rem; margin:22px 0 9px; }
.auth-card>p { font-size:.82rem; margin-bottom:24px; }
.segmented { margin-bottom:0; border-radius:11px; padding:4px; }
.segmented button { font-size:.8rem; min-height:44px; }
label { font-size:.78rem; font-weight:600; margin-bottom:18px; }
input,select,textarea { border-radius:10px; min-height:46px; font-size:.87rem; font-weight:400; padding:11px 13px; }
input::placeholder,textarea::placeholder { color:var(--muted); opacity:.8; }
.password-field { position:relative; display:block; }
.password-field input { padding-right:50px; }
.password-field button { position:absolute; right:3px; top:8px; width:43px; height:43px; border:0; color:var(--muted); background:transparent; border-radius:8px; }
.auth-footnote { display:flex; align-items:center; justify-content:center; gap:7px; color:var(--muted); font-size:.68rem!important; margin:20px 0 0!important; }
.auth-footnote .ui-icon { width:14px; height:14px; }
.commerce-footer { display:flex; justify-content:space-between; gap:12px; padding:24px 0; border-top:1px solid var(--border); font-size:.72rem; color:var(--muted); }
.commerce-footer a { display:flex; align-items:center; gap:8px; }
.commerce-footer .ui-icon { width:15px; height:15px; }
.panel-layout { grid-template-columns:248px minmax(0,1fr); }
.sidebar { padding:28px 18px; background:var(--surface); position:sticky; top:0; height:calc(100dvh - 78px); overflow:auto; min-height:0; display:flex; flex-direction:column; }
.sidebar-heading { margin:0 10px 24px; }
.sidebar nav { gap:0; }
.nav-group { margin-bottom:20px; }
.nav-group-label { display:block; color:var(--muted); font-size:.65rem; letter-spacing:.1em; text-transform:uppercase; margin:0 12px 7px; font-weight:650; }
.sidebar nav button { display:flex; align-items:center; gap:11px; width:100%; border-radius:10px; color:var(--muted); font-size:.8rem; font-weight:550; padding:11px 12px; margin:3px 0; min-height:44px; }
.sidebar nav button>.ui-icon { width:19px; height:19px; }
.sidebar nav button.active { background:var(--brand-soft); color:var(--brand); font-weight:650; }
.sidebar nav button:hover:not(.active) { background:var(--soft); color:var(--text); }
.shared-nav-link { display:flex; align-items:center; gap:11px; min-height:44px; padding:11px 12px; color:var(--muted); font-size:.8rem; border-radius:10px; }
a.shared-nav-link:hover { background:var(--soft); color:var(--text); }
.shared-nav-link .ui-icon { width:19px; height:19px; }
.shared-nav-link small { display:block; margin-top:4px; font-size:.61rem; line-height:1.5; }
.locked-nav .shared-nav-link { color:var(--muted); background:var(--soft); cursor:not-allowed; margin:4px 0; }
.nav-count { display:grid; place-items:center; border-radius:6px; margin-left:auto; font-size:.65rem; min-width:20px; height:20px; background:var(--brand-soft); color:var(--brand); }
.sidebar>.text-link { display:flex; align-items:center; gap:8px; font-size:.77rem; margin:0 12px 22px; min-height:44px; color:var(--muted); }
.sidebar-note { border-top:1px solid var(--border); display:flex; align-items:center; gap:12px; padding:18px 12px 0; color:var(--muted); margin-top:auto; }
.sidebar-note p { font-size:.68rem; line-height:1.7; margin:0; }
.panel-main { padding:34px clamp(20px,3.2vw,48px) 56px; }
.page-heading { margin-bottom:28px; gap:20px; }
.page-heading h1 { font-size:2rem; margin:7px 0 0; }
.section-description { margin:10px 0 0; color:var(--muted); font-size:.83rem; max-width:560px; }
.branch-label { width:180px; color:var(--muted); font-size:.67rem; flex-shrink:0; }
.branch-label select { font-size:.78rem; background:var(--surface); }
.overview-hero { background:var(--surface); border:1px solid var(--border); border-radius:24px; display:grid; grid-template-columns:1.3fr .8fr; align-items:center; gap:35px; padding:32px; margin-bottom:24px; overflow:hidden; }
.overview-hero h2 { font-size:2rem; max-width:450px; margin:19px 0 14px; }
.overview-hero p { color:var(--muted); font-size:.85rem; max-width:490px; line-height:1.8; }
.overview-art { position:relative; min-height:205px; display:flex; align-items:center; justify-content:center; padding:10px; }
.art-card { transform:rotate(-7deg); width:260px; min-height:155px; border-radius:15px; padding:23px; background:#172b4d; color:white; box-shadow:0 20px 25px #1427481a; }
.art-card>span { display:flex; align-items:center; gap:8px; font-size:.53rem; letter-spacing:.14em; color:#bbcced; }
.art-card>span .ui-icon { width:16px; height:16px; }
.art-card strong { display:block; font-size:1.16rem; margin:20px 0; line-height:1.2; overflow-wrap:anywhere; }
.art-card-bottom { display:flex; align-items:center; gap:20px; justify-content:space-between; font-size:.63rem; color:#c3d0e6; }
.art-card-bottom .ui-icon { width:33px; height:33px; color:#fff; }
.overview-art .art-card { width:160px; min-height:320px; border:4px solid #e8eef6; border-radius:10px; padding:18px; transform:rotate(-4deg); }
.overview-art .art-card-bottom { flex-direction:column-reverse; align-items:center; text-align:center; margin-top:36px; }
.overview-art .art-card-bottom .ui-icon { width:80px; height:80px; }
.art-sticker { position:absolute; right:-4px; bottom:10px; display:flex; align-items:center; gap:7px; border:1px solid var(--border); border-radius:11px; padding:10px 13px; background:var(--surface); color:var(--text); font-size:.65rem; box-shadow:0 6px 20px #13274712; transform:rotate(3deg); }
.art-sticker .ui-icon { color:var(--good); width:15px; height:15px; }
.setup-guide { border:1px solid var(--border); border-radius:20px; padding:25px; background:var(--surface); margin-bottom:22px; }
.setup-guide h2 { font-size:1.1rem; margin:8px 0 22px; }
.setup-steps { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:0; }
.setup-steps>button { display:grid; grid-template-columns:34px 1fr 20px; column-gap:10px; text-align:left; border:0; background:transparent; color:var(--text); padding:12px 16px; min-height:70px; border-right:1px solid var(--border); }
.setup-steps>button:first-child { padding-left:0; }
.setup-steps>button:last-child { border-right:0; }
.setup-steps strong { font-size:.73rem; align-self:end; }
.setup-steps small { font-size:.65rem; color:var(--muted); grid-column:2; margin-top:4px; line-height:1.5; }
.setup-steps>button>.ui-icon { grid-column:3; grid-row:1/3; align-self:center; width:16px; color:var(--muted); }
.step-number { grid-row:1/3; display:grid; place-items:center; width:34px; height:34px; background:var(--soft); border-radius:10px; align-self:center; color:var(--muted); font-size:.8rem; font-weight:700; }
.step-number.complete { background:var(--brand-soft); color:var(--brand); }
.step-number .ui-icon { width:18px; height:18px; }
.setup-steps>button:hover { background:var(--soft); border-radius:10px; }
.metrics-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:15px; margin:24px 0 34px; }
.metric-card { border:1px solid var(--border); border-radius:17px; background:var(--surface); padding:19px; display:grid; grid-template-columns:1fr 32px; align-items:start; gap:7px; }
.metric-card>span:not(.metric-icon) { font-size:.7rem; line-height:1.6; color:var(--muted); }
.metric-icon { grid-column:2; grid-row:1/3; display:grid; place-items:center; width:30px; height:30px; border-radius:9px; background:var(--soft); color:var(--muted); }
.metric-icon .ui-icon { width:16px; height:16px; }
.metric-card strong { font-size:1.65rem; letter-spacing:-.04em; font-weight:700; }
.workspace-section h2 { font-size:1.2rem; margin:7px 0 0; }
.workspace-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
.workspace-card { display:flex; flex-direction:column; padding:24px; border:1px solid var(--border); border-radius:18px; background:var(--surface); }
.workspace-icon { color:var(--brand); margin-bottom:23px; }
.workspace-card h3 { font-size:.95rem; margin:0 0 10px; }
.workspace-card p { font-size:.77rem; color:var(--muted); line-height:1.7; margin-bottom:22px; }
.workspace-card .button { margin-top:auto; align-self:start; font-size:.74rem; }
.setup-notice { display:flex; align-items:center; gap:15px; background:var(--surface); border:1px solid var(--border); border-radius:15px; padding:18px 20px; margin-bottom:22px; }
.setup-notice strong { font-size:.83rem; }
.setup-notice p { font-size:.77rem; color:var(--muted); margin:5px 0 0; }
.notice-icon { width:35px; height:35px; display:grid; place-items:center; color:var(--brand); background:var(--brand-soft); border-radius:10px; flex-shrink:0; }
.setup-notice .button { margin-left:auto; flex-shrink:0; }
.section-toolbar { margin-bottom:22px; }
.section-toolbar>.muted { font-size:.83rem; max-width:630px; }
.grid .card h3 { font-size:1rem; }
.grid .card>.muted { font-size:.78rem; }
.qr-thumb { width:112px; height:112px; border:1px solid #e6eaf1; padding:8px; border-radius:13px; }
.url-text { font-size:.73rem; }
.badge { font-size:.65rem; padding:5px 10px; }
.empty { padding:42px 24px; border:1px dashed var(--border); font-size:.85rem; line-height:1.8; }
.list-item { border-radius:14px; padding:20px; }
.list-item p { font-size:.82rem; }
.list-item h3 { font-size:.95rem; }
.data-table th,.data-table td { padding:14px 16px; font-size:.77rem; }
dialog { padding:28px; border-radius:22px; width:min(660px,calc(100vw - 28px)); }
dialog h2 { font-size:1.45rem; margin:0 0 22px; }
dialog p { font-size:.85rem; color:var(--muted); line-height:1.7; }
.dialog-close { margin:-8px -8px 3px; }
.dialog-footer { position:sticky; bottom:-28px; background:var(--surface); border-top:1px solid var(--border); padding:18px 0 12px; margin-top:24px; }
.dialog-footer .button:first-child { margin-right:auto; }
.critical-note { background:var(--soft); border-left:0; padding:16px; }
.critical-note p { margin:0 0 10px; }
.editor-stage { padding:22px; background:var(--soft); border:1px solid var(--border); }
.editor-stage .canvas-container { box-shadow:0 5px 24px #14253b12; }
.editor-toolbar .button { font-size:.75rem; }
.editor-properties { background:var(--soft); border:0; }
.editor-properties p { font-size:.78rem; }
.editor-guides { font-size:.7rem; }
.editor-back { margin-bottom:18px; }
.panel-mobile-bar,.mobile-nav-close,.panel-menu-backdrop { display:none; }
.public-main { max-width:1060px; margin:46px auto; padding-bottom:90px; }
.public-page .header-home { display:none; }
.bento { grid-template-columns:1.3fr .8fr; gap:20px; }
.bento-main { padding:44px; }
.bento-main h1 { font-size:clamp(2rem,4vw,3rem); margin:20px 0 16px; }
.bento-main>p { font-size:.95rem; line-height:1.8; max-width:420px; }
.bento-side { background:#152745; color:#d8e4fa; padding:40px; display:flex; flex-direction:column; justify-content:space-between; position:relative; overflow:hidden; }
.bento-side h2 { color:white; font-size:2rem; margin:24px 0 16px; }
.bento-side p { font-size:.9rem; line-height:1.8; }
.bento-side small { color:#b0c2de; font-size:.69rem; line-height:1.8; margin-top:26px; }
.bento-side::before { content:""; position:absolute; top:-100px; right:-70px; width:260px; height:260px; border:1px solid #ffffff14; border-radius:50%; pointer-events:none; }
.bento-symbol { margin:0; width:48px; height:48px; display:grid; place-items:center; border:1px solid #a0c5fb55; color:#c8dcfa; border-radius:14px; font-size:24px; }
.review-stars { margin-top:30px; gap:10px; }
.star { width:56px; height:60px; border-radius:13px; font-size:33px; color:#9aa8bd; transition:transform .16s,background .16s; }
.star:hover { transform:translateY(-3px); }
.star.selected { color:#b4821b; background:#fff4d9; border-color:#e8cd93; }
.dark .star.selected { color:#f5d18b; background:#443722; border-color:#826943; }
#rating-label { font-size:.77rem; }
.review-result { border:1px solid var(--border); background:var(--soft); padding:22px; }
.review-result h2 { font-size:1.2rem; margin:0 0 12px; }
.review-result p { font-size:.84rem; line-height:1.7; }
.menu-hero { margin:8px 0 26px; text-align:left; padding:28px 32px; border:1px solid var(--border); border-radius:22px; background:var(--surface); }
.menu-hero h1 { margin:14px 0 12px; font-size:2.3rem; }
.menu-hero p { margin:0; font-size:.84rem; }
.table-actions { justify-content:start; margin:16px 0 26px; gap:10px; }
.table-actions .button { min-height:46px; padding:11px 17px; }
.category-nav { top:0; padding:12px 0; gap:8px; }
.category-nav a { font-size:.75rem; padding:10px 16px; }
.menu-item { padding:22px; border-radius:18px; }
.menu-item h3 { font-size:1.03rem; }
.menu-item.no-photo { display:flex; flex-direction:column; }
.menu-item .actions { margin-top:14px; }
.menu-item .price { display:block; font-size:1.15rem; margin:10px 0; }
.cart-bar { padding-top:12px; padding-bottom:max(12px,env(safe-area-inset-bottom)); }
.cart-bar span { font-size:.8rem; }
@media(max-width:1150px) {
  .commerce-hero { gap:32px; }
  .panel-layout { grid-template-columns:215px minmax(0,1fr); }
  .overview-hero { padding:26px; gap:15px; }
  .overview-hero h2 { font-size:1.7rem; }
  .overview-art { padding:12px 0; }
  .art-card { width:220px; padding:19px; }
  .setup-steps>button { grid-template-columns:30px 1fr; padding:9px; }
  .setup-steps>button>.ui-icon { display:none; }
  .workspace-grid { grid-template-columns:1fr; }
  .workspace-card { display:grid; grid-template-columns:35px 1fr auto; column-gap:17px; align-items:center; }
  .workspace-icon { grid-row:1/3; margin:0; }
  .workspace-card p { margin:0; grid-column:2; }
  .workspace-card .button { grid-column:3; grid-row:1/3; align-self:center; }
}
@media(max-width:900px) {
  .commerce-landing { padding-top:42px; }
  .commerce-hero { gap:25px; grid-template-columns:1fr 1fr; }
  .hero-copy h1 { font-size:3.25rem; }
  .hero-copy>p { font-size:.92rem; }
  .product-showcase { padding:15px; }
  .physical-card { padding:21px; }
  .showcase-grid { gap:9px; }
  .review-preview,.menu-preview { padding:13px; }
  .showcase-card strong { font-size:.76rem; }
  .feature-strip { gap:18px; }
  .access-layout { gap:35px; }
  .metrics-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .overview-hero { grid-template-columns:1fr; }
  .overview-art { display:none; }
}
@media(max-width:760px) {
  .app-header { height:70px; padding:0 16px; }
  .header-actions { gap:7px; }
  .header-home { min-width:44px; margin:0; justify-content:center; }
  .header-home span { display:none; }
  .brand { font-size:.94rem; }
  .brand-mark { width:32px; height:32px; }
  .brand small { font-size:.65rem; }
  .commerce-landing { padding:32px 20px 0; }
  .commerce-hero { grid-template-columns:1fr; gap:34px; margin-bottom:32px; }
  .hero-copy h1 { font-size:3.6rem; margin:23px 0 18px; }
  .hero-copy>p { max-width:470px; font-size:.94rem; }
  .hero-actions .button { flex:1; padding:12px 14px; font-size:.82rem; }
  .hero-reassurance { gap:9px 14px; font-size:.67rem; }
  .product-showcase { padding:17px; border-radius:22px; }
  .physical-card h2 { font-size:1.8rem; }
  .showcase-card strong { font-size:.8rem; }
  .physical-heading { font-size:.75rem; }
  .example-qr { width:85px; }
  .feature-strip { grid-template-columns:1fr; padding:27px 0; gap:25px; }
  .feature-strip article { gap:15px; }
  .feature-strip p { max-width:100%; }
  .access-layout { grid-template-columns:1fr; gap:36px; padding:40px 0; }
  .getting-started>h2 { font-size:2.25rem; margin:14px 0 27px; }
  .start-steps { gap:23px; }
  .auth-card { padding:24px; }
  .commerce-footer { flex-direction:column; gap:12px; padding:23px 0; }
  .panel-layout { display:block; }
  .panel-main { padding:17px 16px 40px; }
  .panel-mobile-bar { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:24px; }
  .panel-mobile-bar>.button { min-height:44px; font-size:.75rem; }
  .panel-mobile-bar>span { font-size:.72rem; color:var(--muted); text-align:right; }
  .sidebar { position:fixed; z-index:30; left:0; top:0; bottom:0; width:min(320px,88vw); height:100dvh; padding:24px 18px; transform:translateX(-101%); visibility:hidden; transition:transform .2s; border-right:1px solid var(--border); border-bottom:0; }
  .sidebar-heading { display:flex; align-items:center; justify-content:space-between; margin:0 0 22px 10px; gap:8px; }
  .mobile-nav-close { display:grid; place-items:center; }
  .sidebar nav { flex-direction:column; overflow:visible; }
  .sidebar nav button { white-space:normal; flex-shrink:initial; }
  .sidebar>.text-link { margin:0 12px 22px; }
  .panel-nav-open .sidebar { transform:none; visibility:visible; }
  .panel-nav-open { overflow:hidden; }
  .panel-menu-backdrop:not([hidden]) { display:block; position:fixed; z-index:29; inset:0; width:100%; height:100%; border:0; background:#07132280; backdrop-filter:blur(3px); }
  .page-heading { align-items:flex-start; gap:12px; margin-bottom:24px; }
  .page-heading h1 { font-size:1.65rem; }
  .page-heading .eyebrow { font-size:.59rem; letter-spacing:.1em; }
  .section-description { font-size:.75rem; line-height:1.7; }
  .branch-label { width:120px; font-size:.6rem; }
  .branch-label select { font-size:.72rem; padding:9px 7px; min-height:44px; }
  .overview-hero { padding:24px; border-radius:19px; margin-bottom:18px; }
  .overview-hero h2 { font-size:1.8rem; margin:18px 0 12px; }
  .overview-hero p { font-size:.83rem; }
  .overview-hero .button { width:100%; }
  .setup-guide { padding:20px; }
  .setup-guide>.card-top { flex-wrap:wrap; }
  .setup-guide h2 { margin-bottom:6px; }
  .setup-guide .badge { margin-bottom:14px; }
  .setup-steps { grid-template-columns:1fr; }
  .setup-steps>button,.setup-steps>button:first-child { grid-template-columns:34px 1fr 20px; border-right:0; border-bottom:1px solid var(--border); padding:16px 0; }
  .setup-steps>button:last-child { border-bottom:0; padding-bottom:0; }
  .setup-steps>button>.ui-icon { display:block; }
  .setup-steps strong { font-size:.78rem; }
  .setup-steps small { font-size:.69rem; }
  .metrics-grid { gap:12px; margin:20px 0 28px; }
  .metric-card { padding:16px; grid-template-columns:1fr; min-height:130px; }
  .metric-icon { grid-column:1; grid-row:1; width:27px; height:27px; }
  .metric-card>span:not(.metric-icon) { grid-row:2; font-size:.65rem; }
  .metric-card strong { font-size:1.55rem; }
  .workspace-card { display:flex; align-items:stretch; padding:22px; }
  .workspace-icon { margin-bottom:15px; align-self:start; }
  .workspace-card p { margin-bottom:20px; }
  .workspace-card .button { align-self:start; margin:0; }
  .setup-notice { flex-wrap:wrap; padding:18px; gap:12px; }
  .setup-notice>div { flex:1; min-width:160px; }
  .setup-notice .button { width:100%; }
  .grid .card { padding:23px; }
  .qr-thumb { width:93px; height:93px; margin-left:12px; }
  .section-toolbar .actions { margin-top:0; }
  dialog { padding:23px; border-radius:19px; }
  .dialog-footer { bottom:-23px; gap:8px; }
  .dialog-footer .button { flex:1; padding:11px 12px; }
  .public-main { margin:26px auto; padding:0 16px 100px; }
  .bento { grid-template-columns:1fr; gap:15px; }
  .bento-main { padding:28px 24px; }
  .bento-main h1 { font-size:2.15rem; }
  .bento-main>p { font-size:.88rem; }
  .review-stars { gap:6px; justify-content:space-between; margin-top:27px; }
  .star { width:48px; height:56px; flex:1; max-width:58px; font-size:30px; }
  .bento-side { padding:27px; }
  .bento-side h2 { font-size:1.8rem; margin:20px 0 12px; }
  .menu-hero { padding:23px; margin:4px 0 18px; }
  .menu-hero h1 { font-size:1.95rem; margin:12px 0; }
  .table-actions { flex-direction:row; gap:9px; margin:0 0 18px; }
  .table-actions .button { width:auto; flex:1; font-size:.76rem; padding:10px; }
  .menu-item { padding:22px; }
  .editor-stage { padding:10px; }
  .cart-bar span { font-size:.73rem; line-height:1.6; }
}
@media(max-width:360px) {
  .review-stars { gap:4px; }
  .star { min-width:44px; }
  .commerce-landing { padding-left:16px; padding-right:16px; }
  .hero-copy h1 { font-size:3.1rem; }
  .physical-card { padding:19px; }
  .physical-heading { font-size:.69rem; }
  .mini-brand { width:27px; height:27px; }
  .review-preview,.menu-preview { padding:12px; }
  .showcase-card strong { font-size:.71rem; }
  .page-heading { flex-wrap:wrap; }
  .branch-label { width:100%; }
}
@media(prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  .star,.sidebar { transition:none; }
}

/* ==============================================================
   ATRIL ACRÍLICO 3D, SHOWCASE INTERACTIVO & NUEVA EXPERIENCIA COMERCIOS
   ============================================================== */
.stand-showcase-wrapper {
  background: var(--soft);
  border: 1px solid var(--border);
  border-radius: 28px;
  padding: 24px;
  position: relative;
  overflow: hidden;
}
.stand-showcase-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 20px;
}
.stand-showcase-caption {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--muted);
}
.stand-switcher {
  display: flex;
  gap: 6px;
  background: var(--surface);
  border: 1px solid var(--border);
  padding: 4px;
  border-radius: 14px;
  overflow-x: auto;
  max-width: 100%;
}
.stand-switcher-btn {
  border: 0;
  background: transparent;
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 700;
  padding: 8px 12px;
  border-radius: 10px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 0.2s ease;
  white-space: nowrap;
}
.stand-switcher-btn.active {
  background: var(--brand);
  color: #fff;
  box-shadow: 0 2px 8px rgba(18, 103, 214, 0.25);
}
.dark .stand-switcher-btn.active {
  background: #3b82f6;
  color: #ffffff;
}

/* Escenario del Acrílico Físico (Nordental Style) */
.stand-stage {
  padding: 38px 28px 65px;
  background: radial-gradient(ellipse at 25% 10%, #fffdf7, #e6e2d8);
  border: 1px solid var(--border);
  border-radius: 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}
.dark .stand-stage {
  background: radial-gradient(ellipse at 25% 10%, #37483e, #1b2924);
  border-color: rgba(255,255,255,0.08);
}
.stand-stage::before {
  content: '';position:absolute;inset:64% 0 0;
  background:repeating-linear-gradient(2deg,#b5977520 0 1px,transparent 1px 14px),linear-gradient(110deg,#e6d6c0,#cdb598);
  border-top:1px solid #a9907125;
}
.dark .stand-stage::before {background:repeating-linear-gradient(2deg,#d4b48a12 0 1px,transparent 1px 14px),linear-gradient(110deg,#685746,#41372f);border-top-color:#ffffff0d}
.table-coffee {position:absolute;width:116px;height:116px;bottom:70px;left:-42px;border:12px solid #f8f4e9;border-radius:50%;background:radial-gradient(circle at 35% 35%,#a47746,#593b23 65%);box-shadow:0 0 0 9px #e5dfd3,9px 15px 18px #37271b30;transform:scaleY(.64) rotate(-16deg)}
.table-napkin {position:absolute;right:-50px;bottom:22px;width:146px;height:180px;transform:rotate(-27deg) skewY(5deg);background:repeating-linear-gradient(90deg,#ffffff50 0 1px,transparent 1px 4px),#ede7d9;box-shadow:0 8px 15px #37271b20;border-radius:2px}
.dark .table-coffee {border-color:#d6d0c1;box-shadow:0 0 0 9px #b3a995,9px 15px 18px #0006}.dark .table-napkin{background:repeating-linear-gradient(90deg,#ffffff10 0 1px,transparent 1px 4px),#9a927f}

.acrylic-frame {
  position: relative;
  width: 100%;
  max-width: 248px;
  margin: 0 auto;
  transition: transform 0.3s ease;
  transform:perspective(1100px) rotateY(-7deg) rotateX(3deg);
  z-index:1;
}
.acrylic-frame:hover {
  transform:perspective(1100px) rotateY(-3deg) rotateX(2deg) translateY(-2px);
}
.acrylic-glass {
  position: relative;
  padding: 6px 6px 13px;
  border-radius: 5px 5px 2px 2px;
  border: 1px solid rgba(255, 255, 255, 0.85);
  background:linear-gradient(120deg,#ffffff85,#ffffff15 48%,#ffffff60);
  box-shadow: 0 25px 60px -15px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(0, 0, 0, 0.05);
  overflow: hidden;
  backdrop-filter: blur(2px);
}
.dark .acrylic-glass {
  border-color: rgba(255, 255, 255, 0.6);
  box-shadow: 0 30px 70px -15px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(255, 255, 255, 0.1);
}
.acrylic-glare {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 100%;
  background: linear-gradient(112deg, transparent 24%, rgba(255, 255, 255, 0.06) 30%, transparent 42%,transparent 84%,rgba(255,255,255,.12) 100%);
  pointer-events: none;
  z-index: 20;
}
.acrylic-stand-base {
  height: 39px;
  background: linear-gradient(170deg, #f7fafc70, #b6c1c585 76%, #ffffffc9 78%,#a9b6bca0 85%);
  border-radius: 1px 1px 4px 4px;
  margin: -1px -14px 0;
  border: 1px solid rgba(255, 255, 255, 0.7);
  clip-path:polygon(6% 0,94% 0,100% 100%,0 100%);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
}
.dark .acrylic-stand-base {
  background: linear-gradient(170deg, #eef5f750, #95a5ab65 76%, #ffffffa9 78%,#a9b6bc80 85%);
  border-color: rgba(255, 255, 255, 0.6);
}
.acrylic-stand-shadow {
  height: 14px;
  background: rgba(35, 27, 20, 0.35);
  border-radius: 9999px;
  margin: -8px -20px 0;
  filter: blur(8px);
}
@media(max-width:420px){.stand-stage{padding:28px 26px 48px}.acrylic-frame{max-width:210px}.table-coffee{left:-68px}.table-napkin{right:-94px}}
@media(prefers-reduced-motion:reduce){.acrylic-frame{transition:none}}

/* Temas del Cartel Dentro del Acrílico */
.stand-card {
  padding: 24px 20px;
  text-align: center;
  position: relative;
  z-index: 10;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  min-height: 480px;
  transition: all 0.3s ease;
}

/* 1. Noche Luxury (Nordental Teal & Gold) */
.stand-theme-luxury {
  background: #060b17;
  background-image: 
    radial-gradient(circle at 50% 0%, rgba(0, 168, 150, 0.32) 0%, transparent 65%),
    radial-gradient(circle at 100% 100%, rgba(14, 165, 233, 0.18) 0%, transparent 55%),
    radial-gradient(circle at 0% 100%, rgba(245, 158, 11, 0.16) 0%, transparent 50%);
  color: #ffffff;
}
.stand-theme-luxury .stand-pill-badge {
  background: rgba(0, 168, 150, 0.18);
  border: 1px solid rgba(0, 168, 150, 0.45);
  color: #2dd4bf;
}
.stand-theme-luxury .stand-title {
  color: #ffffff;
}
.stand-theme-luxury .stand-subtitle {
  color: #94a3b8;
}
.stand-theme-luxury .stand-qr-pedestal {
  background: #ffffff;
  border: 2.5px solid #00a896;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5);
}
.stand-theme-luxury .stand-nfc-pill {
  background: rgba(15, 23, 42, 0.95);
  border: 1px solid rgba(0, 168, 150, 0.45);
  color: #ffffff;
  box-shadow: 0 4px 15px rgba(0, 168, 150, 0.25);
}
.stand-theme-luxury .stand-steps-box {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.09);
  color: #cbd5e1;
}
.stand-theme-luxury .step-circle {
  background: #00a896;
  color: #ffffff;
}
.stand-theme-luxury .stand-footer-bar {
  border-top-color: rgba(255, 255, 255, 0.1);
  color: #94a3b8;
}
.stand-theme-luxury .stand-footer-bold {
  color: #ffffff;
}

/* 2. Blanco Puro & Oro (Ahorro Tinta / Médico / Comercial) */
.stand-theme-light {
  background: #ffffff;
  color: #0f172a;
}
.stand-theme-light .stand-pill-badge {
  background: rgba(0, 168, 150, 0.08);
  border: 1px solid rgba(0, 168, 150, 0.25);
  color: #0f766e;
}
.stand-theme-light .stand-title {
  color: #0f172a;
}
.stand-theme-light .stand-subtitle {
  color: #475569;
}
.stand-theme-light .stand-qr-pedestal {
  background: #ffffff;
  border: 2px solid #e2e8f0;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
}
.stand-theme-light .stand-nfc-pill {
  background: #00a896;
  border: 1px solid #00a896;
  color: #ffffff;
  box-shadow: 0 4px 15px rgba(0, 168, 150, 0.25);
}
.stand-theme-light .stand-steps-box {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  color: #475569;
}
.stand-theme-light .step-circle {
  background: #00a896;
  color: #ffffff;
}
.stand-theme-light .stand-footer-bar {
  border-top-color: #e2e8f0;
  color: #64748b;
}
.stand-theme-light .stand-footer-bold {
  color: #0f172a;
}

/* 3. Gastronomía & Mesas */
.stand-theme-bistro {
  background: #141b2d;
  background-image: 
    radial-gradient(circle at 50% 0%, rgba(245, 158, 11, 0.28) 0%, transparent 60%),
    radial-gradient(circle at 100% 100%, rgba(225, 29, 72, 0.15) 0%, transparent 55%);
  color: #ffffff;
}
.stand-theme-bistro .stand-pill-badge {
  background: rgba(245, 158, 11, 0.18);
  border: 1px solid rgba(245, 158, 11, 0.45);
  color: #fbbf24;
}
.stand-theme-bistro .stand-title {
  color: #ffffff;
}
.stand-theme-bistro .stand-subtitle {
  color: #cbd5e1;
}
.stand-theme-bistro .stand-qr-pedestal {
  background: #ffffff;
  border: 2.5px solid #f59e0b;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.45);
}
.stand-theme-bistro .stand-nfc-pill {
  background: #f59e0b;
  border: 1px solid #d97706;
  color: #0f172a;
  box-shadow: 0 4px 15px rgba(245, 158, 11, 0.3);
}
.stand-theme-bistro .stand-steps-box {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.09);
  color: #cbd5e1;
}
.stand-theme-bistro .step-circle {
  background: #f59e0b;
  color: #0f172a;
}
.stand-theme-bistro .stand-footer-bar {
  border-top-color: rgba(255, 255, 255, 0.1);
  color: #94a3b8;
}
.stand-theme-bistro .stand-footer-bold {
  color: #ffffff;
}

/* Componentes Visuales del Atril */
.stand-pill-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 14px;
  border-radius: 9999px;
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 10px;
}
.stand-stars-gold {
  color: #f59e0b;
  letter-spacing: 2px;
  font-size: 0.75rem;
}
.stand-brand-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-bottom: 6px;
}
.stand-brand-logo {
  font-weight: 800;
  font-size: 0.85rem;
  letter-spacing: -0.02em;
}
.stand-title {
  font-size: 1.15rem;
  font-weight: 850;
  line-height: 1.2;
  margin: 0 0 4px;
  letter-spacing: -0.02em;
}
.stand-subtitle {
  font-size: 0.68rem;
  margin: 0;
  line-height: 1.4;
  max-width: 240px;
}
.stand-qr-pedestal {
  width: 145px;
  height: 145px;
  border-radius: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px;
  margin: 12px auto;
  box-sizing: border-box;
}
.stand-qr-pedestal svg {
  width: 100%;
  height: 100%;
  border-radius: 8px;
  display: block;
}
.stand-nfc-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 14px;
  border-radius: 9999px;
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-bottom: 12px;
}
.stand-nfc-pill .ui-icon {
  width: 14px;
  height: 14px;
}
.stand-steps-box {
  width: 100%;
  padding: 8px;
  border-radius: 12px;
  margin-bottom: 10px;
}
.stand-steps-table {
  width: 100%;
  border-collapse: collapse;
}
.stand-steps-table td {
  text-align: center;
  vertical-align: middle;
  padding: 0;
}
.step-circle {
  width: 20px;
  height: 20px;
  line-height: 20px;
  border-radius: 50%;
  display: block;
  font-size: 0.65rem;
  font-weight: 850;
  margin: 0 auto 2px;
}
.step-caption {
  font-size: 0.62rem;
  font-weight: 700;
  display: block;
}
.step-arrow-sign {
  font-size: 0.75rem;
  opacity: 0.6;
}
.stand-footer-bar {
  width: 100%;
  padding-top: 8px;
  border-top: 1px solid;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.62rem;
  text-align: left;
}
.stand-footer-left {
  display: flex;
  align-items: center;
  gap: 6px;
}
.google-g-icon {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #ffffff;
  padding: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 1px 3px rgba(0,0,0,0.15);
}
.google-g-icon svg {
  width: 14px;
  height: 14px;
}
.stand-footer-bold {
  font-weight: 800;
  display: block;
  line-height: 1.2;
}
.stand-footer-right {
  text-align: right;
  line-height: 1.2;
}

/* Bento Grid de Pilares de Valor */
.bento-pillars-section {
  margin: 64px 0 54px;
}
.bento-pillars-header {
  text-align: center;
  max-width: 680px;
  margin: 0 auto 36px;
}
.bento-pillars-header h2 {
  font-size: clamp(2rem, 3.8vw, 2.7rem);
  letter-spacing: -0.03em;
  margin: 10px 0 14px;
}
.bento-pillars-header p {
  color: var(--muted);
  font-size: 0.95rem;
}
.bento-pillars-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}
.pillar-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 26px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: var(--shadow);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.pillar-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 35px rgba(0,0,0,0.06);
}
.dark .pillar-card:hover {
  box-shadow: 0 12px 35px rgba(0,0,0,0.4);
}
.pillar-top {
  margin-bottom: 20px;
}
.pillar-icon-box {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: var(--brand-soft);
  color: var(--brand);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
}
.pillar-icon-box .ui-icon {
  width: 24px;
  height: 24px;
}
.pillar-tag {
  display: inline-block;
  padding: 3px 9px;
  border-radius: 20px;
  font-size: 0.65rem;
  font-weight: 750;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  background: var(--soft);
  color: var(--muted);
  margin-bottom: 10px;
}
.pillar-card h3 {
  font-size: 1.15rem;
  font-weight: 750;
  margin: 0 0 8px;
  letter-spacing: -0.02em;
}
.pillar-card p {
  color: var(--muted);
  font-size: 0.84rem;
  line-height: 1.65;
  margin: 0;
}
.pillar-bottom {
  padding-top: 16px;
  border-top: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.74rem;
  font-weight: 700;
  color: var(--brand);
}

/* Sección Comparativa */
.compare-section {
  margin: 54px 0 64px;
  padding: 40px;
  background: var(--soft);
  border: 1px solid var(--border);
  border-radius: 28px;
}
.compare-header {
  text-align: center;
  max-width: 620px;
  margin: 0 auto 36px;
}
.compare-header h2 {
  font-size: 2.1rem;
  margin: 8px 0 10px;
}
.compare-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
.compare-card-box {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 28px;
}
.compare-card-box.highlight {
  border: 2px solid var(--brand);
  position: relative;
  box-shadow: 0 10px 30px rgba(18, 103, 214, 0.08);
}
.compare-badge-corner {
  position: absolute;
  top: -12px;
  right: 20px;
  background: var(--brand);
  color: #fff;
  font-size: 0.65rem;
  font-weight: 800;
  padding: 4px 12px;
  border-radius: 20px;
  text-transform: uppercase;
}
.compare-list {
  list-style: none;
  padding: 0;
  margin: 20px 0 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.compare-list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.85rem;
  color: var(--muted);
}
.compare-card-box.highlight .compare-list li {
  color: var(--text);
}
.compare-list .check-icon {
  color: var(--good);
  font-weight: bold;
}
.compare-list .cross-icon {
  color: var(--bad);
  font-weight: bold;
}

/* FAQ Accordion */
.faq-section {
  margin: 54px 0 64px;
  max-width: 860px;
  margin-left: auto;
  margin-right: auto;
}
.faq-header {
  text-align: center;
  margin-bottom: 32px;
}
.faq-header h2 {
  font-size: 2.2rem;
  margin: 8px 0 12px;
}
.faq-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.faq-item {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  overflow: hidden;
  transition: border-color 0.2s ease;
}
.faq-item[open] {
  border-color: var(--brand);
}
.faq-summary {
  padding: 18px 22px;
  font-size: 0.95rem;
  font-weight: 750;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  list-style: none;
  user-select: none;
  min-height: 48px;
}
.faq-summary::-webkit-details-marker {
  display: none;
}
.faq-summary::after {
  content: "+";
  font-size: 1.4rem;
  font-weight: 400;
  color: var(--brand);
  transition: transform 0.2s ease;
}
.faq-item[open] .faq-summary::after {
  content: "−";
}
.faq-body {
  padding: 0 22px 20px;
  font-size: 0.85rem;
  line-height: 1.7;
  color: var(--muted);
}

/* Impresión de Cartel A5 Limpia y Directa */
@media print {
  @page {
    size: A5 portrait;
    margin: 0;
  }
  .app-header, .header-actions, .hero-actions, .stand-switcher, .bento-pillars-section, .compare-section, .faq-section, #acceso, .commerce-footer {
    display: none !important;
  }
  .stand-stage {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
  }
  .acrylic-frame {
    max-width: 148mm !important;
    width: 148mm !important;
    transform:none !important;
  }
  .acrylic-glass {
    border: none !important;
    box-shadow: none !important;
    padding:0 !important;
    background:none !important;
  }
  .acrylic-glare, .acrylic-stand-base, .acrylic-stand-shadow, .table-coffee, .table-napkin, .stand-stage::before {
    display: none !important;
  }
  .stand-card {
    min-height: 210mm !important;
    height: 210mm !important;
    box-sizing: border-box !important;
    padding: 16mm 14mm !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }
  .stand-card.stand-professional{padding:0!important;min-height:0!important;aspect-ratio:1/2;width:100mm!important;height:200mm!important;margin:auto}
}

/* Responsive adjustments */
@media (max-width: 1000px) {
  .bento-pillars-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .compare-grid {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 640px) {
  .bento-pillars-grid {
    grid-template-columns: 1fr;
  }
  .stand-showcase-header {
    flex-direction: column;
    align-items: flex-start;
  }
  .stand-switcher {
    width: 100%;
  }
  .stand-switcher-btn {
    flex: 1;
    justify-content: center;
  }
  .compare-section {
    padding: 24px 16px;
  }
}

/* ==============================================================
   SUITE PROFESIONAL DE RESEÑAS GOOGLE & EXPERIENCIA PÚBLICA COMERCIOS
   ============================================================== */
.public-review-hero {
  text-align: center;
  margin-bottom: 2.2rem;
  padding: 0 12px;
}
.public-badge-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 18px;
  border-radius: 9999px;
  background: rgba(33, 96, 219, 0.08);
  border: 1px solid rgba(33, 96, 219, 0.22);
  color: var(--brand, #2160db);
  font-size: 0.8rem;
  font-weight: 750;
  letter-spacing: 0.04em;
  margin-bottom: 1.1rem;
}
.dark .public-badge-pill {
  background: rgba(56, 189, 248, 0.12);
  border-color: rgba(56, 189, 248, 0.3);
  color: #38bdf8;
}

.public-review-title {
  font-size: clamp(2rem, 4.2vw, 3.1rem);
  font-weight: 850;
  letter-spacing: -0.035em;
  line-height: 1.15;
  margin-bottom: 0.9rem;
  color: var(--hero-ink, #0f172a);
}
.dark .public-review-title {
  color: #f8fafc;
  background: linear-gradient(135deg, #ffffff 40%, #bae6fd 75%, #38bdf8 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.public-review-subtitle {
  max-width: 720px;
  margin: 0 auto;
  color: var(--muted, #475569);
  font-size: 1rem;
  line-height: 1.65;
}
.dark .public-review-subtitle {
  color: #94a3b8;
}

/* Barra de Pestañas de Arquetipos */
.public-style-switcher {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  margin: 1.8rem auto 2.4rem;
  padding: 6px;
  background: var(--surface, #ffffff);
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 9999px;
  max-width: 760px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.04);
}
.dark .public-style-switcher {
  background: rgba(18, 24, 38, 0.85);
  border-color: rgba(255, 255, 255, 0.1);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4);
}

.public-style-pill {
  background: transparent;
  border: none;
  color: var(--muted, #64748b);
  padding: 8px 18px;
  border-radius: 9999px;
  font-size: 0.86rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.22s ease;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 44px;
  touch-action: manipulation;
  user-select: none;
}
.dark .public-style-pill {
  color: #94a3b8;
}
.public-style-pill:hover {
  color: var(--text, #0f172a);
  background: var(--soft, #f1f5f9);
}
.dark .public-style-pill:hover {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.08);
}
.public-style-pill.active {
  background: var(--brand, #2160db);
  color: #ffffff !important;
  box-shadow: 0 4px 14px rgba(33, 96, 219, 0.35);
}
.dark .public-style-pill.active {
  background: #38bdf8;
  color: #060913 !important;
  box-shadow: 0 4px 18px rgba(56, 189, 248, 0.4);
}

/* Escenario Central del Widget */
.public-stage-container {
  min-height: 440px;
  padding: 2.5rem 1.25rem;
  border-radius: 26px;
  background: radial-gradient(ellipse at 50% 50%, #ffffff 0%, #edf2f7 100%);
  border: 1px solid var(--border, #e2e8f0);
  box-shadow: 0 10px 35px rgba(0, 0, 0, 0.05);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 2.2rem;
  position: relative;
  overflow: hidden;
  transition: background 0.3s ease;
}
.dark .public-stage-container {
  background: radial-gradient(ellipse at 50% 50%, rgba(18, 24, 38, 0.85) 0%, rgba(7, 11, 20, 0.98) 100%);
  border-color: rgba(255, 255, 255, 0.09);
  box-shadow: 0 16px 45px rgba(0, 0, 0, 0.5);
}

/* Grilla de Detalles y Características */
.public-details-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.4rem;
  margin-bottom: 2.4rem;
}
@media (max-width: 860px) {
  .public-details-grid {
    grid-template-columns: 1fr;
  }
}

.public-info-card {
  background: var(--surface, #ffffff);
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 20px;
  padding: 1.6rem;
  box-shadow: var(--shadow);
}
.dark .public-info-card {
  background: rgba(18, 24, 38, 0.9);
  border-color: rgba(255, 255, 255, 0.09);
}

.public-info-card h3 {
  font-size: 1.15rem;
  font-weight: 750;
  margin-bottom: 0.65rem;
  color: var(--text, #0f172a);
  display: flex;
  align-items: center;
  gap: 8px;
}
.dark .public-info-card h3 {
  color: #f8fafc;
}

.public-info-card p {
  font-size: 0.88rem;
  color: var(--muted, #64748b);
  line-height: 1.6;
  margin-bottom: 1.1rem;
}
.dark .public-info-card p {
  color: #94a3b8;
}

.public-feature-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.public-feature-tag {
  font-size: 0.76rem;
  padding: 5px 12px;
  border-radius: 8px;
  background: rgba(33, 96, 219, 0.08);
  border: 1px solid rgba(33, 96, 219, 0.2);
  color: var(--brand, #2160db);
  font-weight: 700;
}
.dark .public-feature-tag {
  background: rgba(56, 189, 248, 0.1);
  border-color: rgba(56, 189, 248, 0.28);
  color: #38bdf8;
}

/* Tarjeta de Conversión para Demo */
.public-cta-card {
  background: linear-gradient(135deg, rgba(33, 96, 219, 0.06) 0%, rgba(56, 189, 248, 0.08) 100%);
  border: 1.5px solid rgba(33, 96, 219, 0.25);
  border-radius: 22px;
  padding: 2rem 2.2rem;
  text-align: center;
  margin-bottom: 2.5rem;
}
.dark .public-cta-card {
  background: linear-gradient(135deg, rgba(14, 165, 233, 0.12) 0%, rgba(99, 102, 241, 0.1) 100%);
  border-color: rgba(56, 189, 248, 0.3);
}

.public-cta-card h2 {
  font-size: 1.45rem;
  font-weight: 800;
  margin-bottom: 0.5rem;
}

.public-cta-card p {
  font-size: 0.92rem;
  color: var(--muted, #64748b);
  max-width: 600px;
  margin: 0 auto 1.4rem;
  line-height: 1.6;
}
.dark .public-cta-card p {
  color: #94a3b8;
}

.public-cta-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
}
.public-cta-actions .button {
  min-height: 48px;
  padding: 12px 22px;
}

/* Toast flotante */
.public-toast {
  position: fixed;
  bottom: 26px;
  left: 50%;
  transform: translateX(-50%) translateY(120px);
  background: #0f172a;
  border: 1px solid #38bdf8;
  color: #ffffff;
  padding: 0.85rem 1.6rem;
  border-radius: 9999px;
  font-size: 0.88rem;
  font-weight: 700;
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.6), 0 0 20px rgba(56, 189, 248, 0.25);
  z-index: 99999;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s;
  opacity: 0;
  pointer-events: none;
  display: flex;
  align-items: center;
  gap: 8px;
}
.public-toast.visible {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
}

/* Tarjeta de Error Elegante */
.public-error-card {
  max-width: 580px;
  margin: 40px auto;
  text-align: center;
  padding: 3rem 2rem;
  border-radius: 22px;
}
.public-error-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 14px;
  border-radius: 9999px;
  font-size: 0.74rem;
  font-weight: 800;
  background: rgba(239, 68, 68, 0.1);
  color: #ef4444;
  border: 1px solid rgba(239, 68, 68, 0.25);
  margin-bottom: 1rem;
}

/* ==============================================================
   ESTUDIO Y TARJETAS DE QR PROFESIONALES (#LINKS)
   ============================================================== */
.qr-link-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border-radius: 20px;
  padding: 1.5rem;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
  position: relative;
  overflow: hidden;
}
.qr-link-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.08);
}
.dark .qr-link-card:hover {
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.35);
}
.qr-link-badge-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
}
.qr-link-title {
  margin: 0 0 4px 0;
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--text-color, #0f172a);
}
.qr-link-preview-box {
  margin: 16px auto;
  padding: 14px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 18px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 200px;
  width: 100%;
  aspect-ratio: 1 / 1;
}
.dark .qr-link-preview-box {
  background: #ffffff;
  border-color: #334155;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
}
.qr-thumb-large {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  border-radius: 8px;
}
.qr-card-mount canvas,
.qr-card-mount svg {
  display: block !important;
  max-width: 100% !important;
  height: auto !important;
  border-radius: 8px;
}
.qr-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
}
.dark .qr-card-actions {
  border-top-color: rgba(255, 255, 255, 0.08);
}
.qr-card-actions button,
.qr-card-actions a {
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* ==============================================================
   MODAL QR STUDIO: PERSONALIZACIÓN & LOGO EMBEDDED
   ============================================================== */
.qr-studio-wrapper {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  padding: 8px 0;
}
@media (min-width: 680px) {
  .qr-studio-wrapper {
    grid-template-columns: 1.1fr 0.9fr;
    align-items: start;
  }
}
.qr-studio-controls {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.qr-color-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 4px;
}
.qr-color-row input[type="color"] {
  width: 44px;
  height: 40px;
  border-radius: 10px;
  border: 1px solid #cbd5e1;
  cursor: pointer;
  padding: 0;
}
.qr-color-swatches {
  display: flex;
  align-items: center;
  gap: 6px;
}
.qr-color-swatches .swatch {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 2px solid #ffffff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
  cursor: pointer;
  transition: transform 0.15s ease;
}
.qr-color-swatches .swatch:hover {
  transform: scale(1.15);
}
.qr-studio-info {
  background: rgba(15, 118, 110, 0.08);
  border: 1px solid rgba(15, 118, 110, 0.2);
  border-radius: 14px;
  padding: 12px;
  margin-top: 6px;
}
.dark .qr-studio-info {
  background: rgba(45, 212, 191, 0.1);
  border-color: rgba(45, 212, 191, 0.25);
}
.qr-studio-preview-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 16px;
}
.qr-studio-card {
  background: #ffffff;
  padding: 20px;
  border-radius: 20px;
  border: 1px solid #e2e8f0;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 290px;
}
.dark .qr-studio-card {
  background: #ffffff;
  border-color: #334155;
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.5);
}
#studio-qr-mount {
  display: flex;
  align-items: center;
  justify-content: center;
}
#studio-qr-mount canvas,
#studio-qr-mount svg {
  display: block !important;
  max-width: 100% !important;
  height: auto !important;
  border-radius: 12px;
}
.qr-studio-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  max-width: 290px;
}
.qr-studio-actions button,
.qr-studio-actions a {
  width: 100%;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* ==============================================================
   CONTROLES DE ALINEACIÓN Y TIPOGRAFÍAS EN EL EDITOR
   ============================================================== */
.button.mini {
  padding: 4px 10px;
  font-size: 0.78rem;
  min-height: 32px;
}
.align-buttons {
  display: flex;
  gap: 4px;
  margin-top: 4px;
}
.align-buttons button {
  flex: 1;
}

.qr-studio-card.dark-qr-bg {
  background: #090d16 !important;
  border-color: #1e293b !important;
}
.qr-studio-card.dark-qr-bg .url-text {
  color: #94a3b8 !important;
}
.qr-link-preview-box.dark-contrast-mode {
  background: #090d16 !important;
  border-color: #1e293b !important;
}
.contrast-notice {
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 0.82rem;
  line-height: 1.4;
  background: #f1f5f9;
  color: #475569;
  border: 1px solid #e2e8f0;
  margin-top: 10px;
  transition: all 0.2s ease;
}
.dark .contrast-notice {
  background: #1e293b;
  color: #94a3b8;
  border-color: #334155;
}
.contrast-notice.active {
  background: #eff6ff;
  color: #1e40af;
  border-color: #bfdbfe;
  box-shadow: 0 1px 3px rgba(30, 64, 175, 0.08);
}
.dark .contrast-notice.active {
  background: #0f2347;
  color: #93c5fd;
  border-color: #1e3a8a;
}