/* =========================================================================
   MySaaSLux — Tool-Landings (dark tech, design system v2)
   Single, clean stylesheet shared by the 6 /de/tools/* landings.
   Replaces the old per-page light <style> + landing-dark.css override hack.
   Chrome (header/nav/footer/buttons base) comes from site.css + tokens.css;
   this file only styles the landing CONTENT + the QR/menu/PDF builders.
   NO structure, form, builder or Stripe logic depends on these rules.
   ========================================================================= */

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

body { overflow-x: hidden; }
main { padding-top: var(--nav-h); }

/* ---------- Eyebrow / headings / lead ---------- */
.eyebrow { font-family: var(--font-mono); font-size: .71rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--text-2); }
.section-h { font-family: var(--font-head); font-weight: 700; font-size: clamp(1.9rem, 3.8vw, 2.9rem); line-height: 1.1; letter-spacing: -0.02em; color: var(--text); }
.section-sub { font-size: 0.97rem; color: var(--text-2); line-height: 1.65; max-width: 560px; }

/* ---------- Buttons specific to landings (base/ghost/sm from site.css) ---------- */
.btn-dark { background: var(--elevated); color: var(--text); border: 1px solid var(--border); }
.btn-dark:hover { background: #22272E; }
.btn-dark:disabled { opacity: 0.55; cursor: default; transform: none; }
.btn-lime { background: var(--lima); color: #0B0D10; font-weight: 700; }
.btn-lime:hover { background: var(--lima-dark); }

/* ---------- Breadcrumb ---------- */
.migas { max-width: 820px; margin: 24px auto 0; padding: 0 24px; }
.migas ol { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; font-size: 0.76rem; color: var(--text-3); }
.migas li:not(:last-child)::after { content: "/"; margin-left: 8px; color: var(--border); }
.migas a { color: var(--lima); text-decoration: none; }
.migas a:hover { text-decoration: underline; }
.migas li[aria-current="page"] { color: var(--text); font-weight: 500; }

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* ---------- Hero ---------- */
.hero-producto { max-width: 820px; margin: 0 auto; padding: 30px 24px 8px; }
.hero-producto h1 { margin: 14px 0 16px; }
.badge-precio { display: inline-block; font-family: var(--font-mono); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.04em; padding: 4px 12px; border-radius: 100px; background: var(--lima); color: #0B0D10; margin-bottom: 6px; }
.hero-ctas { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 22px; }

/* ---------- Sections ---------- */
section.bloque { max-width: 820px; margin: 0 auto; padding: 40px 24px; }
section.bloque + section.bloque { border-top: 1px solid var(--border); }
section.bloque h2 { font-family: var(--font-head); font-weight: 700; font-size: clamp(1.3rem, 2.6vw, 1.7rem); margin-bottom: 14px; color: var(--text); letter-spacing: -0.01em; }
section.bloque > .section-sub { margin-bottom: 22px; }

/* ---------- Feature grid ---------- */
.feature-grid { display: grid; gap: 16px; grid-template-columns: 1fr; margin-top: 10px; }
@media (min-width: 640px) { .feature-grid { grid-template-columns: 1fr 1fr; } }
.feature { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-m); padding: 22px; }
.feature h3 { font-family: var(--font-head); font-size: 1.05rem; font-weight: 700; margin-bottom: 8px; color: var(--text); }
.feature p { font-size: 0.88rem; color: var(--text-2); line-height: 1.6; }

/* ---------- Check lists ---------- */
.lista-check { list-style: none; margin: 6px 0 0; display: flex; flex-direction: column; gap: 12px; }
.lista-check li { position: relative; padding-left: 30px; font-size: 0.92rem; color: var(--text); line-height: 1.55; }
.lista-check li::before { content: "✓"; position: absolute; left: 0; top: 0; color: var(--lima); font-weight: 900; }
.lista-check li span { color: var(--text-2); }
.lista-incluye { margin: 14px 0 0; padding-left: 20px; font-size: 0.88rem; color: var(--text-2); line-height: 1.8; }
.lista-incluye-title { font-weight: 600; color: var(--text); }

/* ---------- Comparison table ---------- */
.vergleich-wrap { overflow-x: auto; margin-top: 8px; border: 1px solid var(--border); border-radius: var(--radius-m); }
table.vergleich { width: 100%; border-collapse: collapse; min-width: 560px; font-size: 0.86rem; }
table.vergleich caption { text-align: left; font-size: 0.78rem; color: var(--text-3); padding: 12px 16px; caption-side: bottom; }
table.vergleich th, table.vergleich td { padding: 12px 16px; text-align: left; border-bottom: 1px solid var(--border); vertical-align: top; }
table.vergleich thead th { background: var(--surface); color: var(--text); font-weight: 700; font-size: 0.8rem; }
table.vergleich tbody th { font-weight: 600; color: var(--text); }
table.vergleich td { color: var(--text-2); }
table.vergleich tr.is-us { background: rgba(174,246,57,.08); }
table.vergleich tr.is-us th, table.vergleich tr.is-us td { color: var(--text); font-weight: 600; }
table.vergleich tr:last-child th, table.vergleich tr:last-child td { border-bottom: none; }

/* ---------- Price blocks ---------- */
.precio-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-m); padding: 26px; }
.precio-num { font-family: var(--font-mono); font-weight: 700; font-size: 2.2rem; line-height: 1.1; color: var(--text); letter-spacing: -0.02em; }
.precio-num small { font-size: 1rem; font-weight: 600; color: var(--text-2); }
.precio-nota { font-family: var(--font-mono); font-size: 0.78rem; color: var(--text-3); margin-top: 8px; }
.precio-limites { margin: 18px 0 0; padding-left: 20px; font-size: 0.85rem; color: var(--text-2); line-height: 1.75; }

.precios-comparativa { display: grid; grid-template-columns: 1fr; gap: 16px; margin-bottom: 18px; }
@media (min-width: 560px) { .precios-comparativa { grid-template-columns: 1fr 1fr; } }
.precio-mini { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-m); padding: 18px; position: relative; }
.precio-mini--premium { border-color: var(--lima); background: #171b21; }
.badge-nuevo { position: absolute; top: -10px; right: 14px; background: var(--lima); color: #0B0D10; font-family: var(--font-mono); font-size: 0.66rem; font-weight: 700; padding: 3px 10px; border-radius: 100px; letter-spacing: 0.03em; }
.precio-mini-precio { font-family: var(--font-mono); font-weight: 700; font-size: 1.5rem; color: var(--text); }
.precio-mini-nombre { font-family: var(--font-mono); font-weight: 600; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-3); margin-top: 4px; }
.precio-mini-desc { font-size: 0.83rem; color: var(--text-2); margin-top: 8px; line-height: 1.55; }

/* ---------- Upsell ---------- */
.upsell { background: #14171d; border: 1px solid var(--border); color: var(--text); border-radius: var(--radius-l); padding: 30px; }
.upsell h2 { color: var(--text); }
.upsell p { color: var(--text-2); font-size: 0.92rem; line-height: 1.6; margin-bottom: 14px; }
.upsell .xb-price { display: inline-block; background: var(--lima); color: #0B0D10; font-weight: 700; border-radius: 999px; padding: 8px 18px; font-size: 0.92rem; }

/* ---------- Cross-sell cards ---------- */
.cross-grid { display: grid; gap: 14px; grid-template-columns: 1fr; margin-top: 10px; }
@media (min-width: 640px) { .cross-grid { grid-template-columns: 1fr 1fr; } }
.cross-card { display: flex; flex-direction: column; gap: 6px; padding: 20px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-m); text-decoration: none; color: inherit; transition: transform 0.15s var(--ease), box-shadow 0.15s, border-color 0.15s; }
.cross-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-card); border-color: var(--lima); }
.cross-card h3 { font-family: var(--font-head); font-size: 1.05rem; font-weight: 700; color: var(--text); }
.cross-card p { font-size: 0.84rem; color: var(--text-2); line-height: 1.5; flex: 1; }
.cross-card .cross-cta { font-family: var(--font-mono); font-size: 0.8rem; font-weight: 600; color: var(--lima); }

/* ---------- FAQ ---------- */
.faq details { border-bottom: 1px solid var(--border); padding: 14px 0; }
.faq summary { cursor: pointer; font-weight: 600; font-size: 0.95rem; list-style: none; color: var(--text); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::before { content: "+ "; color: var(--lima); font-weight: 900; }
.faq details[open] summary::before { content: "– "; }
.faq p { margin-top: 10px; font-size: 0.88rem; color: var(--text-2); line-height: 1.65; }

/* ---------- Anfrage form ---------- */
.anfrage-box { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-l); padding: 30px; }
.anfrage-box .form-title { font-family: var(--font-head); font-size: 1.4rem; font-weight: 700; margin-bottom: 5px; color: var(--text); }
.anfrage-box .form-sub { font-size: 0.85rem; color: var(--text-2); margin-bottom: 22px; }
.fgroup { margin-bottom: 14px; display: flex; flex-direction: column; gap: 6px; }
.flabel { font-size: 0.78rem; font-weight: 600; color: var(--text); }
.finput, .ftextarea { width: 100%; padding: 10px 13px; border-radius: var(--radius-s); border: 1.5px solid var(--border); background: var(--elevated); font-family: var(--font-body); font-size: 0.9rem; color: var(--text); transition: border-color 0.15s; }
.finput::placeholder, .ftextarea::placeholder { color: var(--text-3); }
.finput:focus, .ftextarea:focus { outline: none; border-color: var(--lima); }
.ftextarea { resize: vertical; min-height: 76px; }
.fcheck-wrap { display: flex; align-items: flex-start; gap: 9px; padding: 11px 13px; border-radius: var(--radius-s); background: rgba(255,255,255,.03); border: 1px solid var(--border); margin-bottom: 9px; }
.fcheck-wrap input[type="checkbox"] { width: 15px; height: 15px; flex-shrink: 0; margin-top: 2px; accent-color: var(--lima); cursor: pointer; }
.fcheck-wrap label { font-size: 0.75rem; color: var(--text-2); line-height: 1.5; cursor: pointer; }
.fcheck-wrap a { color: var(--lima); font-weight: 600; }
.fsubmit { width: 100%; padding: 12px; background: var(--lima); color: #0B0D10; font-family: var(--font-body); font-weight: 700; font-size: 0.92rem; border: none; border-radius: var(--radius-s); cursor: pointer; margin-top: 6px; transition: background 0.15s; }
.fsubmit:disabled { background: var(--elevated); color: var(--text-3); cursor: not-allowed; }
.fsubmit:not(:disabled):hover { background: var(--lima-dark); }
.form-error, .form-success { display: none; font-size: 0.82rem; margin-top: 10px; }
.form-error { color: #fca5a5; }
.form-success { color: var(--lima); }

/* ---------- Trust / extras ---------- */
.caja-confianza { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-m); padding: 22px; font-size: 0.85rem; color: var(--text-2); line-height: 1.7; }
.caja-confianza strong { color: var(--text); }
.otros-formatos { font-size: 0.85rem; color: var(--text-2); margin-top: 10px; }
.otros-formatos a { color: var(--lima); font-weight: 600; }
.checklist-312j { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-m); padding: 18px 20px; font-size: 0.85rem; color: var(--text-2); line-height: 1.7; margin-bottom: 16px; }
.checklist-312j strong { color: var(--text); }

.erinnerung-box { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-l); padding: 26px; }
.erinnerung-box .badge-precio { background: var(--elevated); color: var(--text); }

/* ---------- Demo showcases ---------- */
.demo-ejemplo { display: flex; flex-wrap: wrap; gap: 24px; align-items: flex-start; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-m); padding: 24px; }
.demo-ejemplo img { width: 160px; height: 160px; border-radius: 10px; background: #fff; border: 1px solid var(--border); flex-shrink: 0; }
.demo-ejemplo-texto { flex: 1; min-width: 220px; font-size: 0.9rem; color: var(--text-2); line-height: 1.6; }
.demo-ejemplo-texto strong { color: var(--text); }
.demo-ejemplo-imgs { display: flex; gap: 18px; flex-wrap: wrap; }
.demo-ejemplo-imgs figure { margin: 0; text-align: center; }
.demo-ejemplo-imgs img { display: block; border-radius: 8px; background: #fff; border: 1px solid var(--border); box-shadow: 0 6px 18px rgba(0,0,0,0.35); }
.demo-ejemplo-imgs figcaption { font-size: 0.72rem; color: var(--text-3); margin-top: 8px; max-width: 180px; }
.demo-premium-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 16px; margin-top: 18px; }
.demo-premium-item { text-align: center; }
.demo-premium-item img { width: 100%; max-width: 160px; aspect-ratio: 1 / 1; border-radius: 10px; background: #fff; border: 1px solid var(--border); }
.demo-premium-caption { font-size: 0.78rem; color: var(--text-3); margin-top: 8px; }

/* ---------- CTA final ---------- */
.cta-final { max-width: 640px; margin: 0 auto; padding: 8px 24px 90px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 14px; }

/* =========================================================================
   BUILDERS — QR-Paket (.qrpack-*), Speisekarte (.menuqr-*), PDF (.bp-*)
   Faithful transcription of the original builder layout, dark-themed.
   DOM / field ids / builder JS are unchanged; only colours & fonts move
   onto the design system.
   ========================================================================= */

/* --- QR-Marketing-Paket --- */
.qrpack-form { display: flex; flex-direction: column; gap: 18px; }
.qrpack-field { display: flex; flex-direction: column; gap: 6px; font-size: 0.84rem; font-weight: 600; color: var(--text); }
.qrpack-field input, .qrpack-field select { font-family: var(--font-body); font-size: 0.92rem; font-weight: 400; padding: 10px 12px; border: 1.5px solid var(--border); border-radius: var(--radius-s); background: var(--elevated); color: var(--text); }
.qrpack-field input:focus, .qrpack-field select:focus { outline: none; border-color: var(--lima); }
.qrpack-canales { display: flex; flex-direction: column; gap: 14px; }
.qrpack-canal-row { display: grid; grid-template-columns: 1fr; gap: 10px; padding: 16px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-m); }
.qrpack-canal-body { display: grid; gap: 10px; }
@media (min-width: 620px) { .qrpack-canal-body { grid-template-columns: 1fr 1fr; } }
.qrpack-remove { align-self: flex-start; }
.qrpack-add-canal { margin-top: 10px; }
.qrpack-summary { background: var(--surface); border: 1px dashed var(--border); border-radius: var(--radius-m); padding: 18px; font-size: 0.86rem; color: var(--text-2); }
.qrpack-summary h3 { font-family: var(--font-head); font-size: 1rem; margin-bottom: 8px; color: var(--text); }
.qrpack-summary ul { padding-left: 18px; color: var(--text-2); line-height: 1.7; }
.qrpack-summary-negocio { font-weight: 700; margin-bottom: 4px; color: var(--text); }
.qrpack-summary-empty { color: var(--text-2); }
.qrpack-error { display: none; background: rgba(248,113,113,.1); border: 1px solid rgba(248,113,113,.4); color: #fca5a5; border-radius: var(--radius-s); padding: 12px 14px; font-size: 0.86rem; }
.qrpack-status { display: none; border-radius: var(--radius-m); padding: 24px; }
.qrpack-status--ok { background: rgba(174,246,57,.08); border: 1px solid var(--lima); }
.qrpack-status--info { background: var(--surface); border: 1px solid var(--border); }
.qrpack-status h3 { font-family: var(--font-head); margin-bottom: 8px; color: var(--text); }
.qrpack-status p { color: var(--text-2); line-height: 1.6; }
.qrpack-checklist { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-s); padding: 14px 16px; font-size: 0.82rem; color: var(--text-2); line-height: 1.6; }
.qrpack-niveles { display: grid; grid-template-columns: 1fr; gap: 12px; }
@media (min-width: 560px) { .qrpack-niveles { grid-template-columns: 1fr 1fr; } }
.qrpack-nivel-tile { position: relative; display: block; cursor: pointer; border: 1.5px solid var(--border); border-radius: var(--radius-m); padding: 16px; background: var(--surface); transition: border-color 0.15s, background 0.15s; }
.qrpack-nivel-tile:hover { border-color: #3a414c; }
.qrpack-nivel-tile input { position: absolute; opacity: 0; top: 14px; left: 14px; }
.qrpack-nivel-tile.is-selected { border-color: var(--lima); background: #171b21; }
.qrpack-nivel-precio { font-family: var(--font-mono); font-weight: 700; font-size: 1.3rem; color: var(--text); }
.qrpack-nivel-nombre { font-weight: 700; font-size: 0.92rem; margin-top: 2px; color: var(--text); }
.qrpack-nivel-desc { font-size: 0.8rem; color: var(--text-2); margin-top: 6px; line-height: 1.5; }
.qrpack-premium-fields { display: none; flex-direction: column; gap: 18px; padding: 16px; background: var(--surface); border: 1px dashed var(--border); border-radius: var(--radius-m); }
.qrpack-premium-fields.is-visible { display: flex; }
.qrpack-color-field { display: flex; align-items: center; gap: 10px; }
.qrpack-color-field input[type="color"] { width: 44px; height: 36px; padding: 2px; border: 1.5px solid var(--border); border-radius: var(--radius-s); background: var(--elevated); cursor: pointer; }
.qrpack-logo-note { font-size: 0.78rem; color: var(--text-2); }
.qrpack-logo-preview { display: flex; align-items: center; gap: 10px; font-size: 0.82rem; color: var(--text-2); margin-top: 8px; }
.qrpack-logo-preview img { width: 40px; height: 40px; border-radius: 8px; border: 1px solid var(--border); object-fit: contain; background: #fff; display: none; }

/* --- Speisekarte (menuqr) --- */
.menuqr-form { display: flex; flex-direction: column; gap: 22px; }
.menuqr-field { display: flex; flex-direction: column; gap: 6px; font-size: 0.84rem; font-weight: 600; color: var(--text); }
.menuqr-field input { font-family: var(--font-body); font-size: 0.92rem; font-weight: 400; padding: 10px 12px; border: 1.5px solid var(--border); border-radius: var(--radius-s); background: var(--elevated); color: var(--text); }
.menuqr-field input:focus { outline: none; border-color: var(--lima); }
.menuqr-field--full { grid-column: 1 / -1; }
.menuqr-field-hint { font-size: 0.78rem; font-weight: 400; color: var(--text-2); }
.menuqr-logo-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.menuqr-logo-preview-wrap { display: none; align-items: center; gap: 10px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-s); padding: 8px 12px; }
.menuqr-logo-preview-wrap img { width: 44px; height: 44px; object-fit: contain; background: #fff; border-radius: 6px; }
.menuqr-color-row { display: flex; gap: 20px; flex-wrap: wrap; }
.menuqr-color-field { display: flex; flex-direction: column; gap: 6px; font-size: 0.84rem; font-weight: 600; color: var(--text); }
.menuqr-color-field input[type="color"] { width: 52px; height: 40px; padding: 2px; border: 1.5px solid var(--border); border-radius: var(--radius-s); background: var(--elevated); cursor: pointer; }
.menuqr-categorias { display: flex; flex-direction: column; gap: 16px; }
.menuqr-cat-row { display: flex; flex-direction: column; gap: 14px; padding: 18px; background: var(--surface); border: 1.5px solid var(--border); border-radius: var(--radius-m); }
.menuqr-platos { display: flex; flex-direction: column; gap: 12px; }
.menuqr-plato-row { display: flex; flex-direction: column; gap: 10px; padding: 14px; background: var(--elevated); border: 1px solid var(--border); border-radius: var(--radius-s); }
.menuqr-plato-body { display: grid; gap: 10px; grid-template-columns: 1fr; }
@media (min-width: 620px) { .menuqr-plato-body { grid-template-columns: 1fr 1fr; } }
.menuqr-foto-estado { font-size: 0.78rem; color: var(--text-2); }
.menuqr-remove, .menuqr-remove-cat { align-self: flex-start; }
.menuqr-add-plato, .menuqr-add-cat { margin-top: 4px; align-self: flex-start; }
.menuqr-summary { background: var(--surface); border: 1px dashed var(--border); border-radius: var(--radius-m); padding: 18px; font-size: 0.86rem; color: var(--text-2); }
.menuqr-summary h3 { font-family: var(--font-head); font-size: 1rem; margin-bottom: 8px; color: var(--text); }
.menuqr-summary-negocio { font-weight: 700; margin-bottom: 4px; color: var(--text); }
.menuqr-summary-empty { color: var(--text-2); }
.menuqr-summary-colores { display: flex; align-items: center; gap: 6px; color: var(--text-2); margin-bottom: 4px; }
.menuqr-swatch { width: 16px; height: 16px; border-radius: 4px; border: 1px solid var(--border); display: inline-block; }
.menuqr-summary-logo-ok { color: var(--lima); font-weight: 600; }
.menuqr-error { display: none; background: rgba(248,113,113,.1); border: 1px solid rgba(248,113,113,.4); color: #fca5a5; border-radius: var(--radius-s); padding: 12px 14px; font-size: 0.86rem; }
.menuqr-status { display: none; border-radius: var(--radius-m); padding: 24px; }
.menuqr-status--ok { background: rgba(174,246,57,.08); border: 1px solid var(--lima); }
.menuqr-status--info { background: var(--surface); border: 1px solid var(--border); }
.menuqr-status h3 { font-family: var(--font-head); margin-bottom: 8px; color: var(--text); }
.menuqr-status p { color: var(--text-2); line-height: 1.6; }

/* --- PDF-Branding (bp) --- */
.bp-form { display: flex; flex-direction: column; gap: 18px; }
.bp-field { display: flex; flex-direction: column; gap: 6px; font-size: 0.84rem; font-weight: 600; color: var(--text); }
.bp-field input { font-family: var(--font-body); font-size: 0.92rem; font-weight: 400; padding: 10px 12px; border: 1.5px solid var(--border); border-radius: var(--radius-s); background: var(--elevated); color: var(--text); }
.bp-field input:focus { outline: none; border-color: var(--lima); }
.bp-field-hint { font-size: 0.78rem; font-weight: 400; color: var(--text-2); }
.bp-grid-2 { display: grid; gap: 14px; grid-template-columns: 1fr; }
@media (min-width: 620px) { .bp-grid-2 { grid-template-columns: 1fr 1fr; } }
.bp-logo-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.bp-logo-preview-wrap { display: none; align-items: center; gap: 10px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-s); padding: 8px 12px; }
.bp-logo-preview-wrap img { width: 44px; height: 44px; object-fit: contain; background: #fff; border-radius: 6px; }
.bp-color-row { display: flex; gap: 20px; flex-wrap: wrap; }
.bp-color-field { display: flex; flex-direction: column; gap: 6px; font-size: 0.84rem; font-weight: 600; color: var(--text); }
.bp-color-field input[type="color"] { width: 52px; height: 40px; padding: 2px; border: 1.5px solid var(--border); border-radius: var(--radius-s); background: var(--elevated); cursor: pointer; }
.bp-summary { background: var(--surface); border: 1px dashed var(--border); border-radius: var(--radius-m); padding: 18px; font-size: 0.86rem; color: var(--text-2); }
.bp-summary h3 { font-family: var(--font-head); font-size: 1rem; margin-bottom: 8px; color: var(--text); }
.bp-summary-empty { color: var(--text-2); }
.bp-summary-negocio { font-weight: 700; margin-bottom: 6px; color: var(--text); }
.bp-summary-colores { display: flex; align-items: center; gap: 6px; color: var(--text-2); margin-bottom: 4px; }
.bp-swatch { width: 16px; height: 16px; border-radius: 4px; border: 1px solid var(--border); display: inline-block; }
.bp-summary-logo-ok { color: var(--lima); font-weight: 600; }
.bp-checklist { font-size: 0.8rem; color: var(--text-2); line-height: 1.6; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-s); padding: 12px 14px; }
.bp-checklist a { color: var(--lima); font-weight: 600; }
.bp-error { display: none; background: rgba(248,113,113,.1); border: 1px solid rgba(248,113,113,.4); color: #fca5a5; border-radius: var(--radius-s); padding: 12px 14px; font-size: 0.86rem; }
.bp-status { display: none; border-radius: var(--radius-m); padding: 24px; }
.bp-status--ok { background: rgba(174,246,57,.08); border: 1px solid var(--lima); }
.bp-status--info { background: var(--surface); border: 1px solid var(--border); }
.bp-status h3 { font-family: var(--font-head); margin-bottom: 8px; color: var(--text); }
.bp-status p { color: var(--text-2); line-height: 1.6; }

/* ---------- Mobile: no horizontal scroll in nested builder rows ---------- */
@media (max-width: 620px) {
  .menuqr-plato-body, .qrpack-canal-body, .bp-grid-2 { grid-template-columns: 1fr; }
  .menuqr-field, .qrpack-field, .bp-field { min-width: 0; }
  .menuqr-field input, .qrpack-field input, .qrpack-field select,
  .bp-field input, .finput, .ftextarea { width: 100%; min-width: 0; max-width: 100%; }
}