/* ==========================================================================
   CompuNube — web pública (app/site.css)
   Dirección B "Bloques" sobre app/system.css (tokens y componentes cn-).
   Contiene sólo lo propio de las páginas: bloques B, panel ilustrado (de A),
   páginas internas, flujos de preview (carga, copia de sitio), lead, tooltips
   y popovers, onboarding y admin. Las vistas de la tienda de prueba viven en
   app/storefront-view.css. No depende de ningún otro CSS.
   ========================================================================== */

/* 1. DIRECCIÓN B ----------------------------------------------------------- */
:root { --cn-display-weight: 800; --cn-display-tracking: -0.035em; --b-radius: 28px; }
html { overflow-x: clip; }
body { min-width: 320px; }
.b-block { margin-inline: auto; max-width: calc(var(--cn-w-wide) + 2 * var(--cn-gutter)); padding-inline: clamp(8px, 1.5vw, 20px); }
.b-gap { height: clamp(12px, 2vw, 20px); }

/* Hero: campo petróleo suave, anclado a la izquierda, con un panel vivo
   ("tu web, cuidada") a la derecha. El input de dominio es la única acción. */
.b-hero__panel { position: relative; background: var(--cn-brand-soft); border-radius: var(--b-radius); padding: clamp(32px, 4.5vw, 64px) clamp(20px, 4vw, 60px); }
.b-hero__inner { position: relative; z-index: 1; display: grid; gap: clamp(28px, 4vw, 52px); align-items: center; }
@media (min-width: 900px) { .b-hero__inner { grid-template-columns: minmax(0, 1.12fr) minmax(0, .82fr); } }
.b-hero__text { max-width: 600px; }
.b-hero h1 { font-size: clamp(2.4rem, 1.5rem + 3.3vw, 4.1rem); line-height: 1.02; }
.b-hero h1 span { color: inherit; }
.b-hero .cn-lead { margin-top: var(--cn-space-4); color: var(--cn-ink); max-width: 44ch; }
.b-hero form { width: 100%; max-width: 540px; margin-top: var(--cn-space-5); }
.b-hero .cn-combo { box-shadow: var(--cn-shadow-2); }
.b-hero .cn-trust { margin-top: var(--cn-space-1); }
.b-hero__alt { margin-top: var(--cn-space-4); font-size: var(--cn-step--1); }
.b-hero__note { margin-top: var(--cn-space-3); }
.b-hero .cn-fn a { color: var(--cn-accent); }
.b-hero__lead { width: 100%; max-width: 540px; margin-top: var(--cn-space-5); }
.b-hero__media { width: 100%; justify-self: center; }
@media (min-width: 900px) { .b-hero__media { justify-self: end; } }
@media (max-width: 559.98px) {
  .b-hero .cn-combo { box-shadow: none; }
}

.b-head { text-align: left; margin-inline: 0; justify-items: start; max-width: var(--cn-measure); }
.b-head h2 { font-size: var(--cn-step-4); }
/* Jerarquía en vez de tres tarjetas iguales: el ahorro manda (ancho),
   IA e infraestructura abajo. Sin íconos en cuadrado. */
.b-why__grid { display: grid; gap: var(--cn-space-4); grid-template-columns: 1fr; }
@media (min-width: 760px) { .b-why__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.b-why .cn-card { border: 0; background: var(--cn-surface-2); border-radius: 22px; padding: var(--cn-space-6) var(--cn-space-5); }
.b-why .cn-card h3 { font-size: var(--cn-step-2); font-weight: 800; letter-spacing: -.02em; }
.b-why .cn-card .cn-small { color: var(--cn-ink); background: var(--cn-surface); padding: 10px 12px; border-radius: 10px; }
.b-why .cn-card p { color: var(--cn-ink-2); }
.b-why .cn-card .cn-capacity { color: var(--cn-ink); }
.b-why__feature { grid-column: 1 / -1; background: var(--cn-brand-soft); display: grid; gap: var(--cn-space-4); align-items: center; }
@media (min-width: 760px) { .b-why__feature { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); padding: var(--cn-space-6); } }
.b-why__feature h3 { font-size: var(--cn-step-3); }
.b-why__feature .b-why__price { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.b-why__feature .b-why__price b { font: 800 var(--cn-step-4)/1 var(--cn-font); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.b-why__feature .b-why__price span { color: var(--cn-ink-2); font-size: var(--cn-step--1); }
.b-wp { text-align: left; margin-top: var(--cn-space-6); font-size: var(--cn-step-1); max-width: var(--cn-measure); }

.b-how .cn-steps > li::before { background: var(--cn-brand); color: var(--cn-on-brand); }
.b-how__box { background: var(--cn-surface); border: 1px solid var(--cn-line); border-radius: var(--b-radius); padding: clamp(24px, 4vw, 48px); }
.b-examples { margin-top: var(--cn-space-6); display: grid; gap: var(--cn-space-3); justify-items: center; text-align: center; }
.b-examples .cn-cluster { justify-content: center; }

/* Banda invertida (siempre oscura) */
.b-inverse {
  --cn-bg: #15130F; --cn-surface: #1E1B16; --cn-surface-2: #27231C;
  --cn-ink: #F3EEE4; --cn-ink-2: #B8B0A1; --cn-ink-3: #A39B8C;
  --cn-line: #38322A; --cn-line-strong: #7F7667;
  --cn-brand: #52C3B1; --cn-brand-hover: #74D4C4; --cn-on-brand: #0E1513;
  --cn-brand-ink: #74D4C4; --cn-brand-soft: #173832; --cn-accent: #E8917A;
  --cn-focus: #74D4C4; --cn-focus-halo: rgba(116, 212, 196, .25);
  background: var(--cn-bg); color: var(--cn-ink); border-radius: var(--b-radius); color-scheme: dark;
}
:root[data-theme="dark"] .b-inverse { --cn-bg: #0C0B08; --cn-surface: #1A1813; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .b-inverse { --cn-bg: #0C0B08; --cn-surface: #1A1813; } }
.b-inverse .cn-checklist li::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%2374D4C4' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 10.5l2.6 2.5L14 7.5'/%3E%3C/svg%3E"); }
.b-plans .cn-plan__price b { font-weight: 800; }
.b-plans__more { text-align: center; margin-top: var(--cn-space-6); }
.b-plans .cn-notes { margin-inline: auto; }

.b-faq .cn-faq { margin-inline: auto; }
/* Cierre: el único momento centrado de la página. Campo petróleo pleno. */
.b-cta .b-hero__panel { position: relative; overflow: hidden; background: var(--cn-brand); color: var(--cn-on-brand); }
.b-cta .b-hero__panel::before, .b-cta .b-hero__panel::after { content: ""; position: absolute; border-radius: 50%; background: var(--cn-on-brand); opacity: .07; pointer-events: none; }
.b-cta .b-hero__panel::before { width: 320px; height: 120px; left: -70px; top: 30px; box-shadow: 150px -30px 0 8px var(--cn-on-brand); }
.b-cta .b-hero__panel::after { width: 260px; height: 100px; right: -50px; bottom: 24px; box-shadow: -120px 20px 0 4px var(--cn-on-brand); }
.b-cta h2 { font-size: var(--cn-step-4); color: var(--cn-on-brand); }
.b-cta p, .b-cta a:not(.cn-btn), .b-cta .cn-link { color: var(--cn-on-brand); }
.b-cta .cn-btn { --_bg: var(--cn-bg); --_fg: var(--cn-ink); --_bd: var(--cn-bg); }
.b-cta .cn-btn:hover { --_bg: var(--cn-surface); --_bd: var(--cn-surface); }
.b-cta .cn-btn:focus-visible, .b-cta .cn-link:focus-visible, .b-cta a:focus-visible { outline-color: var(--cn-on-brand); }
.b-cta .b-hero__inner { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; gap: var(--cn-space-4); max-width: 620px; margin-inline: auto; }

/* Nav: botón de menú con estado y tema en el panel mobile */
.cn-nav__toggle[aria-expanded="true"] { background: var(--cn-surface-2); }
.cn-nav__menu .cn-theme-row { display: flex; align-items: center; justify-content: space-between; min-height: 48px; padding: 0 var(--cn-space-2); color: var(--cn-ink-2); font-size: var(--cn-step--1); }
.cn-nav__login { font-weight: 600; }
.cn-nav .admin-link { display: inline-flex; }
.cn-nav__bar > .cn-badge + .cn-nav__actions { margin-left: auto; }
.cn-nav .admin-link[hidden] { display: none; }
/* Vista previa de la tienda: el único CTA primario es "Quiero publicarla" (#lp-preview-bar); "Editar" queda secundario. */
.is-store-preview .cn-nav__cta, .is-store-preview .cn-nav__menu > .cn-btn--primary { display: none; }

/* Footer mínimo */
.cn-footer { padding-block: var(--cn-space-7) var(--cn-space-6); }
.cn-footer p b { color: var(--cn-ink); }
.cn-footer .cn-cluster a { color: var(--cn-ink-2); }

/* Bloque "rediseños según capacidad" */
.cn-capacity { display: grid; gap: 6px; padding: 12px 14px; border-radius: var(--cn-radius-control); background: var(--cn-surface); border: 1px dashed var(--cn-line-strong); font-size: var(--cn-step--1); line-height: 1.5; color: var(--cn-ink); }
.cn-capacity b { color: var(--cn-ink); }
.cn-capacity .cn-badge { justify-self: start; }

/* Tarjeta completa de rediseños (/ia, /planes) */
.cn-capacity-card { border: 1px dashed var(--cn-line-strong); background: var(--cn-surface); }
.cn-capacity-card .cn-capacity__title { font: 800 var(--cn-step-2)/1.2 var(--cn-font); letter-spacing: -.02em; }
.cn-capacity-card p { color: var(--cn-ink-2); max-width: var(--cn-measure); }
.cn-capacity-card .cn-small { color: var(--cn-ink); }

/* 2. PÁGINAS INTERNAS ------------------------------------------------------- */
.p-hero { padding-block: clamp(28px, 5vw, 56px) clamp(24px, 4vw, 40px); }
.p-hero h1 { font-size: var(--cn-step-5); line-height: 1.04; }
.p-hero .cn-lead { margin-top: var(--cn-space-3); }
.p-hero--split { display: grid; gap: var(--cn-space-7); align-items: center; }
@media (min-width: 960px) { .p-hero--split { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); } }
.p-sec + .p-sec { border-top: 1px solid var(--cn-line); }
.p-sec .cn-section-head h2 { font-size: var(--cn-step-4); }
.p-limits { margin-top: var(--cn-space-5); }
.p-calc { display: grid; gap: var(--cn-space-6); }
.p-calc form { display: grid; gap: var(--cn-space-4); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) { .p-calc form { grid-template-columns: repeat(2, minmax(0, 1fr)); } .p-calc form .wide { grid-column: 1 / -1; } }
@media (min-width: 960px) { .p-calc { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); align-items: start; } }
.p-calc .cn-fieldset { grid-column: 1 / -1; }
.p-calc__kinds { display: grid; gap: var(--cn-space-2); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) { .p-calc__kinds { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .p-calc__kinds { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.p-calc__kinds .cn-option { padding: 12px 14px; align-items: center; }
.p-calc__shop { grid-column: 1 / -1; display: grid; gap: var(--cn-space-4); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) { .p-calc__shop { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.p-calc__out { display: grid; gap: var(--cn-space-4); }
.p-result { background: var(--cn-surface); border: 1px solid var(--cn-line); border-radius: var(--cn-radius-card); padding: var(--cn-space-5); display: grid; gap: var(--cn-space-3); align-content: start; }
.p-result h3 { font-size: var(--cn-step-1); }
.p-result p { color: var(--cn-ink-2); }
.p-result .lp-calc-total { color: var(--cn-ink); font-size: var(--cn-step-1); line-height: 1.4; }
.p-result .lp-calc-total span { color: var(--cn-ink-2); font-size: var(--cn-step--1); }
.p-result .lp-calc-break { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: var(--cn-step--1); }
.p-result .lp-calc-break li { display: flex; justify-content: space-between; gap: 12px; border-bottom: 1px dashed var(--cn-line); padding-bottom: 6px; }
.p-result .lp-calc-break b { font-variant-numeric: tabular-nums; color: var(--cn-ink); }
.p-result .lp-calc-warn { color: var(--cn-warn); background: var(--cn-warn-soft); padding: 8px 12px; border-radius: var(--cn-radius-control); font-size: var(--cn-step--1); }
.p-result .lp-calc-vs { display: flex; flex-wrap: wrap; gap: 4px 10px; color: var(--cn-ink); }
.p-result .lp-calc-ratio { font: 800 var(--cn-step-3)/1.1 var(--cn-font); letter-spacing: -.03em; color: var(--cn-brand-ink); }
.p-result .lp-calc-ratio + p, .p-result .lp-calc-ratio span { font: 400 var(--cn-step--1)/1.5 var(--cn-font); letter-spacing: 0; color: var(--cn-ink-2); }
.p-result .lp-calc-honest b { color: var(--cn-ink); }
.p-result .lp-calc-note, .p-result .lp-calc-empty { font-size: var(--cn-step--1); }
.p-packs { display: grid; gap: var(--cn-space-3); grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr)); }
.p-packs .cn-card b { font: 800 var(--cn-step-2)/1 var(--cn-font); letter-spacing: -.02em; }
.p-packs .cn-card p { color: var(--cn-ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.p-band { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--cn-space-5); }
.p-band > div { max-width: 56ch; display: grid; gap: var(--cn-space-2); }
.p-slot { margin-top: var(--cn-space-5); }
.p-tech { margin-top: var(--cn-space-5); border: 1px solid var(--cn-line); border-radius: var(--cn-radius-control); background: var(--cn-surface); }
.p-tech summary { cursor: pointer; padding: 12px 16px; font-weight: 650; font-size: var(--cn-step--1); color: var(--cn-ink); border-radius: var(--cn-radius-control); list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; }
.p-tech summary::-webkit-details-marker { display: none; }
.p-tech summary::after { content: ""; width: 16px; height: 16px; flex: none; background: var(--cn-chevron) center/16px no-repeat; transition: transform var(--cn-dur) var(--cn-ease); }
.p-tech[open] summary::after { transform: rotate(180deg); }
.p-tech > :not(summary) { padding: 0 16px 14px; margin: 0; color: var(--cn-ink-2); font-size: var(--cn-step--1); line-height: 1.6; }
.p-tech code { font-size: .92em; overflow-wrap: anywhere; }
.p-cols { display: grid; gap: var(--cn-space-4); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 760px) { .p-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.p-cols .cn-card ul { margin: 0; padding-left: 1.1em; display: grid; gap: 6px; color: var(--cn-ink-2); }
.p-cols .cn-card h3 { display: flex; gap: 10px; align-items: center; }
.p-mark { flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-size: 14px; font-weight: 800; }
.p-mark--ok { background: var(--cn-success-soft); color: var(--cn-success); }
.p-mark--help { background: var(--cn-brand-soft); color: var(--cn-brand-ink); }
.p-mark--ask { background: var(--cn-warn-soft); color: var(--cn-warn); }
.p-mark--no { background: var(--cn-danger-soft); color: var(--cn-danger); }
.p-steps > li { padding-bottom: var(--cn-space-5); border-bottom: 1px solid var(--cn-line); }
.p-steps > li:last-child { border-bottom: 0; padding-bottom: 0; }
.p-steps dl { display: grid; gap: 4px 16px; margin: var(--cn-space-3) 0 0; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 760px) { .p-steps dl { grid-template-columns: 10rem minmax(0, 1fr); } }
.p-steps dt { font-weight: 700; font-size: var(--cn-step--1); color: var(--cn-ink); padding-top: 2px; }
.p-steps dd { margin: 0 0 6px; color: var(--cn-ink-2); max-width: var(--cn-measure); }
.p-steps .cn-badge { margin-top: 8px; }
.cn-steps > li.p-divider { counter-increment: none; list-style: none; display: block !important; text-align: center; padding: 4px 0 !important; border: 0 !important; }
.p-divider::before { display: none !important; }
.p-divider span { display: inline-block; padding: 6px 14px; border-radius: 99px; background: var(--cn-success-soft); color: var(--cn-success); font-weight: 700; font-size: var(--cn-step--1); }
.p-nots { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.p-nots li { display: grid; grid-template-columns: 22px 1fr; gap: 8px; color: var(--cn-ink-2); }
.p-nots li::before { content: "✕"; color: var(--cn-danger); font-weight: 800; }
.p-ia-group { margin-top: var(--cn-space-6); }
.p-ia-group h3 { font-size: var(--cn-step-2); margin-bottom: var(--cn-space-3); }
.p-ia-table th[scope="row"] { color: var(--cn-ink); font-weight: 600; width: 34%; }
.p-ia-table td:first-of-type { font-style: italic; color: var(--cn-ink-2); }
.p-split-table td { width: 50%; }
.p-split-table td:first-of-type { font-style: normal; color: var(--cn-ink); }
@media (max-width: 759.98px) {
  .p-ia-table, .p-ia-table thead, .p-ia-table tbody, .p-ia-table tr, .p-ia-table th, .p-ia-table td { display: block; width: auto !important; }
  .p-ia-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .p-ia-table tr { padding: 12px 16px; border-bottom: 1px solid var(--cn-line); }
  .p-ia-table tbody tr:last-child { border-bottom: 0; }
  .p-ia-table th, .p-ia-table td { padding: 2px 0; border: 0; }
  .p-ia-table td::before { content: attr(data-label) ": "; font-style: normal; font-weight: 650; color: var(--cn-ink); }
}
.p-soon { border-style: dashed; }
.p-toc { display: flex; flex-wrap: wrap; gap: 8px; margin-top: var(--cn-space-4); }
.p-faq-group { margin-top: var(--cn-space-7); scroll-margin-top: 80px; }
.p-faq-group > h2 { font-size: var(--cn-step-3); margin-bottom: var(--cn-space-3); }
.p-faq-group .cn-faq { max-width: none; }
.p-glossary { display: grid; gap: 0; margin: 0; border-top: 1px solid var(--cn-line); }
.p-glossary > div { display: grid; gap: 4px 24px; padding: 14px 0; border-bottom: 1px solid var(--cn-line); }
@media (min-width: 640px) { .p-glossary > div { grid-template-columns: 12rem minmax(0, 1fr); } }
.p-glossary dt { font-weight: 700; }
.p-glossary dd { margin: 0; color: var(--cn-ink-2); }
.p-guarantees .cn-card { background: var(--cn-surface); }
[id] { scroll-margin-top: 80px; }

/* 3. PANEL ILUSTRADO "Tu web, cuidada" (rescatado de la dirección A) -------- */
.cn-panel { position: relative; max-width: 440px; width: 100%; margin-inline: auto; padding: 4px 4px 28px; }
.cn-panel__win { background: var(--cn-surface); border: 1px solid var(--cn-line); border-radius: 18px; box-shadow: var(--cn-shadow-3); overflow: hidden; transform: rotate(1.2deg); }
.cn-panel__bar { display: flex; align-items: center; gap: 8px; padding: 12px 16px; border-bottom: 1px solid var(--cn-line); background: var(--cn-surface-2); font-size: 13px; color: var(--cn-ink-2); }
.cn-panel__bar i { width: 10px; height: 10px; border-radius: 50%; background: var(--cn-line-strong); opacity: .5; }
.cn-panel__bar span { margin-left: 8px; padding: 3px 10px; background: var(--cn-surface); border-radius: 99px; }
.cn-panel__body { padding: 22px 22px 18px; display: grid; gap: 12px; }
.cn-panel__title { font: 800 1.5rem/1.15 var(--cn-font); letter-spacing: -.02em; }
.cn-panel__row { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--cn-line); border-radius: 12px; font-size: 14px; }
.cn-panel__row b { font-weight: 600; }
.cn-panel__row .cn-badge { font-size: 11px; }
.cn-panel__chat { display: grid; gap: 8px; margin-top: 4px; }
.cn-panel__chat p { max-width: 85%; padding: 10px 14px; border-radius: 14px; font-size: 14px; line-height: 1.4; }
.cn-panel__chat .me { justify-self: end; background: var(--cn-brand); color: var(--cn-on-brand); border-bottom-right-radius: 4px; }
.cn-panel__chat .ia { background: var(--cn-surface-2); border-bottom-left-radius: 4px; }
.cn-panel__tag { position: absolute; left: 12px; bottom: 0; background: var(--cn-bg); border: 1px solid var(--cn-line); border-radius: 12px; padding: 10px 14px; font-size: 13px; font-weight: 600; box-shadow: var(--cn-shadow-2); transform: rotate(-2deg); }
.cn-panel__tag span { color: var(--cn-accent); }
@media (min-width: 1100px) { .cn-panel__tag { left: -28px; } }

/* 4. FORMULARIO DE CONTACTO (leads.js) -------------------------------------- */
.lp-lead { display: grid; gap: var(--cn-space-4); padding: var(--cn-space-5); background: var(--cn-surface); border: 1px solid var(--cn-line); border-radius: var(--cn-radius-card); box-shadow: var(--cn-shadow-2); text-align: left; color: var(--cn-ink); }
.lp-lead-head { display: flex; justify-content: space-between; align-items: start; gap: var(--cn-space-3); }
.lp-lead-title { font: 800 var(--cn-step-2)/1.2 var(--cn-font); letter-spacing: -.02em; }
.lp-lead-title:focus { outline: none; }
.lp-lead-title:focus-visible { outline: 2px solid var(--cn-focus); outline-offset: 4px; border-radius: 4px; }
.lp-lead-body { color: var(--cn-ink-2); }
.lp-lead-form { display: grid; gap: var(--cn-space-4); }
.lp-lead-grid { display: grid; gap: var(--cn-space-4); grid-template-columns: minmax(0, 1fr); }
@container (min-width: 520px) { .lp-lead-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .lp-lead-wide { grid-column: 1 / -1; } }
.lp-lead { container-type: inline-size; }
.lp-lead-actions { display: flex; flex-wrap: wrap; gap: var(--cn-space-3); align-items: center; }
.lp-lead-status { padding: var(--cn-space-4); border-radius: var(--cn-radius-control); background: var(--cn-success-soft); color: var(--cn-ink); }
.lp-lead-status:focus { outline: none; }
.lp-lead-status:focus-visible { outline: 2px solid var(--cn-focus); outline-offset: 2px; }
.lp-lead-status .ok { color: var(--cn-success); font-weight: 800; }

/* 5. TOOLTIPS Y POPOVERS (hints.js: .hint-btn → .am-tip, .pop-btn → .pop) --- */
.hint-btn { position: relative; flex: none; display: inline-grid; place-items: center; width: 22px; height: 22px; padding: 0; margin-left: 4px; vertical-align: -4px; border: 1.5px solid var(--cn-line-strong); border-radius: 50%; background: var(--cn-surface); color: var(--cn-ink-2); font: 700 12px/1 var(--cn-font); font-style: normal; cursor: help; }
.hint-btn::after { content: ""; position: absolute; inset: -11px; border-radius: 50%; }
.hint-btn:hover, .hint-btn[data-open] { background: var(--cn-ink); color: var(--cn-bg); border-color: var(--cn-ink); }
.hint-btn:focus-visible { outline: 2px solid var(--cn-focus); outline-offset: 2px; }
.am-tip { position: fixed; left: 0; top: 0; z-index: var(--cn-z-pop); width: max-content; max-width: min(280px, calc(100vw - 16px)); padding: 8px 12px; background: var(--cn-ink); color: var(--cn-bg); border-radius: var(--cn-radius-s); font: 500 var(--cn-step--1)/1.45 var(--cn-font); letter-spacing: 0; text-transform: none; text-align: left; white-space: normal; box-shadow: var(--cn-shadow-2); }
.am-tip::before { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 12px; }
.am-tip.below::before { top: auto; bottom: 100%; }
.am-tip[hidden] { display: none; }
.term { display: inline; }
.pop-btn { display: inline-flex; align-items: center; min-height: 44px; padding: 0; border: 0; background: none; color: var(--cn-brand-ink); font: 600 var(--cn-step--1)/1.3 var(--cn-font); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; cursor: pointer; }
.pop-btn:hover { text-decoration-thickness: 2px; }
.b-hero .pop-btn { min-height: 32px; }
.pop { position: fixed; left: 16px; top: 80px; z-index: var(--cn-z-pop); width: min(420px, calc(100vw - 32px)); max-height: calc(100vh - 32px); overflow: auto; padding: var(--cn-space-5); background: var(--cn-surface); color: var(--cn-ink); border: 1px solid var(--cn-line); border-radius: var(--cn-radius-card); box-shadow: var(--cn-shadow-3); text-align: left; display: grid; gap: var(--cn-space-3); }
.pop[hidden] { display: none; }
.pop:focus { outline: none; }
.pop-head { display: flex; justify-content: space-between; align-items: start; gap: var(--cn-space-3); }
.pop-head h3, .pop-head h4 { font: 700 var(--cn-step-1)/1.25 var(--cn-font); letter-spacing: -.01em; }
.pop-close { flex: none; display: grid; place-items: center; width: 44px; height: 44px; margin: -10px -10px 0 0; border: 0; border-radius: 50%; background: transparent; color: var(--cn-ink-2); font-size: 24px; line-height: 1; cursor: pointer; }
.pop-close:hover { background: var(--cn-surface-2); color: var(--cn-ink); }
.pop p, .pop-text { color: var(--cn-ink-2); font-size: var(--cn-step--1); line-height: 1.6; margin: 0; }
.pop-facts { margin: 0; display: grid; gap: 2px; }
.pop-facts dt { margin-top: 8px; font-weight: 700; font-size: var(--cn-step--1); color: var(--cn-brand-ink); }
.pop-facts dd { margin: 0; color: var(--cn-ink); font-size: var(--cn-step--1); line-height: 1.6; }
@media (max-width: 640px) {
  .pop { left: 0; right: 0; bottom: 0; top: auto; width: 100%; max-height: 80vh; border-radius: var(--cn-radius-card) var(--cn-radius-card) 0 0; border-width: 1px 0 0; padding-bottom: calc(var(--cn-space-5) + env(safe-area-inset-bottom)); }
}
@media (prefers-reduced-motion: no-preference) { .am-tip:not([hidden]), .pop:not([hidden]) { animation: cn-in .14s ease-out; } }
@keyframes cn-in { from { opacity: 0; translate: 0 4px; } }

/* 6. FLUJO DE PREVIEW: carga, copia de sitio, barra de preview -------------- */
.cn-loading { min-height: calc(100vh - 65px); display: grid; place-content: center; justify-items: center; gap: var(--cn-space-3); padding: var(--cn-space-7) var(--cn-gutter); text-align: center; }
.cn-loading h2 { font-size: var(--cn-step-4); }
.cn-loading__domain { font-weight: 700; color: var(--cn-brand-ink); overflow-wrap: anywhere; }
.cn-ring { width: 48px; height: 48px; border-radius: 50%; border: 3px solid var(--cn-line); border-top-color: var(--cn-brand); animation: cn-spin .8s linear infinite; }
@media (prefers-reduced-motion: reduce) { .cn-ring { animation-duration: 2.4s !important; } }
.cn-progress { list-style: none; margin: var(--cn-space-3) 0 0; padding: 0; display: grid; gap: 10px; text-align: left; width: min(440px, 100%); }
.cn-progress li { display: grid; grid-template-columns: 24px 1fr; gap: 12px; align-items: center; color: var(--cn-ink-3); font-weight: 500; }
.cn-progress li::before { content: ""; width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--cn-line-strong); box-sizing: border-box; }
.cn-progress li[data-state="active"] { color: var(--cn-ink); font-weight: 650; }
.cn-progress li[data-state="active"]::before { border-color: var(--cn-brand); border-right-color: transparent; animation: cn-spin .8s linear infinite; }
.cn-progress li[data-state="done"] { color: var(--cn-ink-2); }
.cn-progress li[data-state="done"]::before { border: 0; background: var(--cn-brand) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='white' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 10.5l2.6 2.5L14 7.5'/%3E%3C/svg%3E") center/20px no-repeat; }
.cn-loading__note { max-width: 52ch; color: var(--cn-ink-2); font-size: var(--cn-step--1); }
.cn-loading__elapsed { font-variant-numeric: tabular-nums; color: var(--cn-ink-2); font-size: var(--cn-step--1); }
.cn-loading__alt { margin-top: var(--cn-space-3); display: flex; flex-wrap: wrap; justify-content: center; gap: var(--cn-space-3); }
.cn-loading .lp-lead { width: min(640px, 100%); margin-top: var(--cn-space-4); }

/* Barra superior de la tienda de prueba (Woo) */
.lp-preview-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; padding: 10px var(--cn-gutter); background: var(--cn-warn-soft); color: var(--cn-ink); border-bottom: 1px solid var(--cn-line); font-size: var(--cn-step--1); }
.lp-preview-bar p { margin: 0; }
.lp-preview-bar b { overflow-wrap: anywhere; }
.lp-preview-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; }

/* Copia de prueba de un sitio (no-Woo) */
.site-copy { padding: var(--cn-space-5) var(--cn-gutter) var(--cn-space-8); max-width: calc(var(--cn-w-wide) + 2 * var(--cn-gutter)); margin-inline: auto; display: grid; gap: var(--cn-space-5); }
.site-copy__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--cn-space-3); padding: 14px 18px; border-radius: var(--cn-radius-card); background: var(--cn-warn-soft); color: var(--cn-ink); }
.site-copy__bar p { margin: 0; }
.site-copy__bar b { overflow-wrap: anywhere; }
.site-copy__grid { display: grid; gap: var(--cn-space-5); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1100px) { .site-copy__grid { grid-template-columns: minmax(0, 1fr) 340px; align-items: start; } .site-copy__side { position: sticky; top: 84px; } }
.site-copy__frame { display: grid; grid-template-rows: auto 1fr; border: 1px solid var(--cn-line-strong); border-radius: var(--cn-radius-card); overflow: hidden; background: var(--cn-surface); box-shadow: var(--cn-shadow-2); }
.site-copy__url { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-bottom: 1px solid var(--cn-line); background: var(--cn-surface-2); font-size: 13px; color: var(--cn-ink-2); min-width: 0; }
.site-copy__url span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.site-copy__url i { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--cn-line-strong); opacity: .5; }
.site-copy iframe { display: block; width: 100%; height: min(78vh, 900px); min-height: 420px; border: 0; background: #fff; }
.site-copy__side { display: grid; gap: var(--cn-space-4); }
.site-copy__side .cn-card { gap: var(--cn-space-3); }
.site-copy__side h2 { font: 800 var(--cn-step-1)/1.25 var(--cn-font); letter-spacing: -.01em; }
.site-copy__pages { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; max-height: 280px; overflow: auto; }
.site-copy__pages button { width: 100%; display: grid; gap: 2px; text-align: left; padding: 8px 10px; border: 1px solid transparent; border-radius: var(--cn-radius-control); background: transparent; color: var(--cn-ink); font: 600 var(--cn-step--1)/1.35 var(--cn-font); cursor: pointer; }
.site-copy__pages button small { color: var(--cn-ink-2); font-weight: 400; overflow-wrap: anywhere; }
.site-copy__pages button:hover { background: var(--cn-surface-2); }
.site-copy__pages button[aria-current="true"] { background: var(--cn-brand-soft); border-color: var(--cn-brand); }
.site-copy__pages button:focus-visible { outline: 2px solid var(--cn-focus); outline-offset: 1px; }
.site-copy__losses { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; font-size: var(--cn-step--1); color: var(--cn-ink-2); }
.site-copy__losses li { display: grid; grid-template-columns: 20px 1fr; gap: 8px; }
.site-copy__losses li::before { content: "•"; color: var(--cn-accent); font-weight: 800; text-align: center; }
.site-copy__losses b { color: var(--cn-ink); }
.site-copy__cta { display: grid; gap: var(--cn-space-3); }

/* 7. ONBOARDING (onboarding.html + onboarding.js) --------------------------- */
.ob-main { max-width: 1100px; margin: 0 auto; padding: clamp(24px, 5vw, 56px) var(--cn-gutter) 96px; }
.ob-intro { margin-bottom: var(--cn-space-6); display: grid; gap: var(--cn-space-3); }
.ob-intro h1 { font-size: var(--cn-step-5); line-height: 1.04; }
.ob-intro p { color: var(--cn-ink-2); max-width: 60ch; }
/* Riel de progreso: lectura precisa de "en qué paso estás". Pegado arriba
   para no perder la orientación. Segmentos llenos = avance real. */
.stepper { position: sticky; top: 64px; z-index: 20; display: flex; flex-wrap: wrap; gap: 6px 10px; margin: 0 0 var(--cn-space-6); padding: var(--cn-space-3) var(--cn-space-4); list-style: none; background: color-mix(in srgb, var(--cn-bg) 94%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border: 1px solid var(--cn-line); border-radius: var(--cn-radius-card); }
.stepper li { flex: 1 1 110px; min-width: 0; display: flex; flex-direction: column; gap: 8px; font-size: var(--cn-step--2); font-weight: 650; color: var(--cn-ink-3); }
.stepper li .bar { height: 5px; border-radius: 99px; background: var(--cn-surface-2); }
.stepper li .lbl { display: flex; align-items: center; gap: 8px; overflow-wrap: anywhere; }
.stepper li .num { flex: none; width: 24px; height: 24px; border-radius: 7px; display: grid; place-items: center; background: var(--cn-surface-2); color: var(--cn-ink-2); font: 700 12px/1 var(--cn-font); font-variant-numeric: tabular-nums; }
.stepper li.done .bar { background: var(--cn-brand); }
.stepper li.done .num { background: var(--cn-brand); color: var(--cn-on-brand); }
.stepper li.done { color: var(--cn-ink-2); }
.stepper li.active { color: var(--cn-brand-ink); }
.stepper li.active .bar { background: var(--cn-brand); }
.stepper li.active .num { background: var(--cn-brand-ink); color: var(--cn-on-brand); box-shadow: 0 0 0 0 var(--cn-focus-halo); animation: ob-live 2s var(--cn-ease) infinite; }
@keyframes ob-live { 0% { box-shadow: 0 0 0 0 var(--cn-focus-halo); } 70% { box-shadow: 0 0 0 7px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }
@media (prefers-reduced-motion: reduce) { .stepper li.active .num { animation: none; } }
.ob-card { background: var(--cn-surface); border: 1px solid var(--cn-line); border-radius: var(--cn-radius-card); padding: clamp(20px, 4vw, 36px); box-shadow: var(--cn-shadow-1); margin-bottom: var(--cn-space-5); }
.ob-card > header { margin-bottom: var(--cn-space-5); }
.ob-head-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 16px; }
.ob-card h2 { font-size: var(--cn-step-3); }
.ob-card header p { color: var(--cn-ink-2); margin-top: var(--cn-space-2); }
.banner { display: flex; gap: 10px; align-items: flex-start; margin-bottom: var(--cn-space-5); padding: 14px 16px; border-radius: var(--cn-radius-control); font-weight: 600; font-size: var(--cn-step--1); border-left: 4px solid; }
.banner.error { background: var(--cn-danger-soft); border-color: var(--cn-danger); color: var(--cn-ink); }
.banner.error b { color: var(--cn-danger); }
.banner.ok { background: var(--cn-success-soft); border-color: var(--cn-success); color: var(--cn-ink); }
.banner.ok b { color: var(--cn-success); }
.banner b { flex: none; }
.ob-form { display: grid; gap: var(--cn-space-4); }
.ob-grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--cn-space-4); }
.ob-field { display: grid; gap: var(--cn-space-2); min-width: 0; font-size: var(--cn-step--1); font-weight: 650; }
.ob-field .hint { font-weight: 400; color: var(--cn-ink-2); }
.ob-label { display: flex; align-items: center; flex-wrap: wrap; gap: 2px 4px; }
.ob-label label { cursor: pointer; }
.pass-wrap { display: flex; gap: 8px; align-items: stretch; }
.pass-wrap > input { flex: 1; min-width: 0; }
.pass-toggle { flex: none; }
/* Dominio de la fase ① "Ver tu tienda": el input manda; en angosto se apila con el botón debajo.
   El borde/anillo vive en .ob-domain-field para que el prefijo "https://" quede dentro del campo. */
.ob-domain-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: stretch; }
.ob-domain-field {
  display: flex; align-items: center; min-width: 0; min-height: var(--cn-control-h-lg);
  padding-inline-start: var(--cn-control-px);
  background: var(--cn-surface); border: var(--cn-border-w) solid var(--cn-line-strong); border-radius: var(--cn-radius-control);
  font: 400 var(--cn-step-1)/1.4 var(--cn-font); cursor: text;
  transition: border-color 220ms var(--cn-ease), box-shadow 220ms var(--cn-ease);
}
.ob-domain-field:hover { border-color: var(--cn-ink-2); }
.ob-domain-field:focus-within {
  border-color: var(--cn-focus);
  box-shadow: 0 0 0 4px var(--cn-focus-halo), 0 0 22px color-mix(in srgb, var(--cn-brand) 24%, transparent);
}
.ob-domain-prefix { flex: none; color: var(--cn-ink-3); user-select: none; pointer-events: none; }
.ob-domain-field.has-scheme .ob-domain-prefix { display: none; }
.ob-domain-field > .ob-domain-input {
  flex: 1; min-height: calc(var(--cn-control-h-lg) - 2 * var(--cn-border-w)); padding-inline-start: 1px;
  font-size: var(--cn-step-1); /* >= 16px: iOS no hace zoom al enfocar */
  border: 0; border-radius: 0 var(--cn-radius-control) var(--cn-radius-control) 0; background: transparent; box-shadow: none;
}
.ob-domain-field > .ob-domain-input:focus { outline: none; box-shadow: none; }
.ob-domain-submit { min-height: var(--cn-control-h-lg); }
@media (prefers-reduced-motion: no-preference) {
  .ob-domain-submit.is-ready { animation: ob-ready-pulse .9s var(--cn-ease) 1; }
}
@keyframes ob-ready-pulse {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--cn-brand) 45%, transparent); transform: scale(1); }
  35% { transform: scale(1.03); }
  100% { box-shadow: 0 0 0 12px color-mix(in srgb, var(--cn-brand) 0%, transparent); transform: scale(1); }
}
@media (max-width: 560px) {
  .ob-domain-row { grid-template-columns: minmax(0, 1fr); }
  .ob-domain-submit { width: 100%; }
}
.ob-actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-top: 4px; }
/* Resumen editable "Detectamos: tienda online con N productos · Cambiar" (reemplaza las preguntas de intención). */
.ob-detected-summary { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin: 0; padding: 12px 14px; border: 1px solid var(--cn-line); border-radius: var(--cn-radius-card, 12px); background: var(--cn-surface-2); color: var(--cn-ink); }
#sandbox-panel { min-width: 0; grid-template-columns: minmax(0, 1fr); }
#sandbox-panel h3 { margin: 0; }
#sandbox-panel .cn-btn { white-space: normal; text-align: center; max-width: 100%; }
.auth-tabs { display: inline-flex; gap: 4px; padding: 4px; margin-bottom: var(--cn-space-5); background: var(--cn-surface-2); border-radius: var(--cn-radius-control); }
.auth-tabs button { min-height: 40px; padding: 0 16px; border: 0; border-radius: calc(var(--cn-radius-control) - 3px); background: transparent; color: var(--cn-ink-2); font: 650 var(--cn-step--1)/1 var(--cn-font); cursor: pointer; }
.auth-tabs button.active { background: var(--cn-surface); color: var(--cn-ink); box-shadow: var(--cn-shadow-1); }
.status-pill { display: inline-flex; align-items: center; gap: 6px; min-height: 26px; padding: 0 10px; border-radius: 99px; background: var(--cn-surface-2); color: var(--cn-ink-2); font-size: var(--cn-step--2); font-weight: 700; }
.status-pill::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.status-pill.paid { background: var(--cn-warn-soft); color: var(--cn-warn); }
.status-pill.accepted { background: var(--cn-brand-soft); color: var(--cn-brand-ink); }
.tenant-list { display: grid; gap: 10px; }
.tenant-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; width: 100%; padding: 14px 16px; border: var(--cn-border-w) solid var(--cn-line); border-radius: var(--cn-radius-control); background: var(--cn-bg); color: inherit; font: inherit; text-align: left; cursor: pointer; }
.tenant-row:hover { border-color: var(--cn-line-strong); }
.tenant-row.sel { border-color: var(--cn-brand); background: var(--cn-brand-soft); }
.tenant-row .t-main { display: grid; gap: 3px; min-width: 0; }
.tenant-row .t-main b { overflow-wrap: anywhere; }
.tenant-row .t-main small { color: var(--cn-ink-2); }
.active-tenant { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: var(--cn-space-5); padding: 12px 16px; border-radius: var(--cn-radius-control); background: var(--cn-surface-2); font-size: var(--cn-step--1); }
.active-tenant b { overflow-wrap: anywhere; }
.active-tenant .spacer { flex: 1; }
.secret-grid { display: grid; gap: 14px; }
.secret-group { grid-column: 1 / -1; margin: 10px 0 -2px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.secret-group:first-child { margin-top: 0; }
.secret-group h3 { font: 700 var(--cn-step-1)/1.2 var(--cn-font); letter-spacing: -.01em; }
.secret-group .tag { min-height: 24px; display: inline-flex; align-items: center; padding: 0 10px; border-radius: 99px; background: var(--cn-surface-2); color: var(--cn-ink-2); font-size: var(--cn-step--2); font-weight: 700; }
.callout { display: grid; gap: 14px; margin-bottom: var(--cn-space-5); padding: 16px 18px; border: 1px solid var(--cn-line); border-left: 4px solid var(--cn-brand); border-radius: var(--cn-radius-control); background: var(--cn-surface); }
.callout .c-block { display: grid; gap: 4px; }
.callout h3 { display: flex; align-items: center; gap: 8px; font: 700 var(--cn-step-0)/1.3 var(--cn-font); letter-spacing: 0; }
.callout h3 .ic { color: var(--cn-brand-ink); }
.callout p { color: var(--cn-ink-2); font-size: var(--cn-step--1); line-height: 1.6; }
.secret-item { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: end; padding: 14px; border: 1px solid var(--cn-line); border-radius: var(--cn-radius-control); background: var(--cn-bg); }
.secret-item .masked { font-size: var(--cn-step--2); color: var(--cn-brand-ink); font-weight: 700; }
.secret-item .loaded-tag { font-size: var(--cn-step--2); color: var(--cn-brand-ink); font-weight: 700; }
.secret-item.saved { border-color: var(--cn-brand); }
.ship-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 120px auto; gap: 8px; align-items: end; margin-bottom: 10px; }
.icon-x { width: 48px; height: 48px; display: grid; place-items: center; padding: 0; border: var(--cn-border-w) solid var(--cn-line-strong); border-radius: var(--cn-radius-control); background: var(--cn-surface); color: var(--cn-danger); font-size: 1.2rem; cursor: pointer; }
.icon-x:hover { background: var(--cn-danger-soft); }
.checks { display: grid; gap: 9px; margin-top: 4px; }
.check { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--cn-line); border-radius: var(--cn-radius-control); background: var(--cn-bg); }
.check .dot { flex: none; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: .85rem; background: var(--cn-surface-2); color: var(--cn-ink-2); }
.check.ok .dot { background: var(--cn-success); color: var(--cn-surface); }
.check.fail .dot { background: var(--cn-danger); color: var(--cn-surface); }
.check .c-body { display: grid; gap: 2px; min-width: 0; }
.check .c-body b { font-size: var(--cn-step--1); display: inline-flex; align-items: center; gap: 2px; }
.check .c-body small { color: var(--cn-ink-2); }
.check .c-state { margin-left: auto; font-size: var(--cn-step--2); font-weight: 700; color: var(--cn-ink-2); }
.check.ok .c-state { color: var(--cn-success); }
.check.fail .c-state { color: var(--cn-danger); }
.faltantes { margin-top: 16px; padding: 14px 16px; border: 1px dashed var(--cn-line-strong); border-radius: var(--cn-radius-control); }
.faltantes ul { margin: 8px 0 0; padding-left: 18px; color: var(--cn-ink-2); }
.ready-box { text-align: center; padding: 14px; display: grid; gap: 8px; }
.ready-box .big { font: 800 var(--cn-step-3)/1.1 var(--cn-font); letter-spacing: -.02em; }
.ready-box .big.yes { color: var(--cn-success); }
.ready-box .big.no { color: var(--cn-danger); }
.muted { color: var(--cn-ink-2); }
/* Pasos bloqueados: se contraen al título + motivo, en trazo punteado y en
   calma. El paso en curso queda sólido y "encendido": una acción por vez. */
.ob-card.gated { background: transparent; box-shadow: none; border-style: dashed; border-color: var(--cn-line-strong); padding-block: clamp(14px, 2.5vw, 20px); margin-bottom: var(--cn-space-3); }
.ob-card.gated > :not(header):not(.gated-reason) { display: none; }
.ob-card.gated > header { margin-bottom: 0; }
.ob-card.gated header p { display: none; }
.ob-card.gated h2 { font-size: var(--cn-step-2); color: var(--cn-ink-2); }
.ob-card.gated .ob-head-row .pop-btn { display: none; }
.ob-card.gated .gated-reason { margin: 10px 0 0; }
.ob-card:not(.gated) { border-left: 3px solid var(--cn-brand); }
.gated-reason { display: inline-flex; align-items: center; gap: 8px; margin: -8px 0 16px; padding: 8px 12px; border-radius: var(--cn-radius-control); background: var(--cn-surface-2); color: var(--cn-ink-2); font-size: var(--cn-step--1); font-weight: 600; }
.gated-reason::before { content: ""; flex: none; width: 14px; height: 14px; border-radius: 4px; background: var(--cn-line-strong) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FAF7F0' stroke-width='3' stroke-linecap='round'%3E%3Crect x='5' y='11' width='14' height='9' rx='2'/%3E%3Cpath d='M8 11V7a4 4 0 0 1 8 0v4'/%3E%3C/svg%3E") center/10px no-repeat; }
.mp-connect { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 10px; padding: 16px; border: 1px solid var(--cn-brand); border-radius: var(--cn-radius-control); background: var(--cn-brand-soft); }
.mp-connect-copy { flex: 1; min-width: min(220px, 100%); }
.mp-connect h3 { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 4px; font: 700 var(--cn-step-1)/1.25 var(--cn-font); letter-spacing: -.01em; }
.mp-connect p { color: var(--cn-ink-2); font-size: var(--cn-step--1); }
.mp-btn { --_bg: #007EB5; --_bd: #007EB5; --_fg: #FFFFFF; }
.mp-btn:hover { --_bg: #00689A; --_bd: #00689A; }
#mp-connect-status { flex-basis: 100%; font-size: var(--cn-step--1); color: var(--cn-ink-2); }
.chip { display: inline-flex; align-items: center; min-height: 22px; padding: 0 9px; border-radius: 99px; background: var(--cn-surface); color: var(--cn-brand-ink); font: 700 var(--cn-step--2)/1 var(--cn-font); box-shadow: inset 0 0 0 1px var(--cn-brand); }
.or-sep { display: flex; align-items: center; gap: 12px; margin: 6px 0 16px; color: var(--cn-ink-2); font-size: var(--cn-step--1); font-weight: 600; }
.or-sep::before, .or-sep::after { content: ""; flex: 1; border-top: 1px solid var(--cn-line); }
.ob-fieldset { border: 1px solid var(--cn-line); border-radius: var(--cn-radius-control); padding: 16px; margin: 0; min-width: 0; }
.ob-fieldset legend { padding: 0 6px; font-weight: 700; }
.ship-note { margin: 0 0 12px; color: var(--cn-ink-2); font-size: var(--cn-step--1); }
.accept-summary { margin: 0 0 14px; padding: 0; list-style: none; display: grid; gap: 6px; font-size: var(--cn-step--1); }
.dev-box { margin-top: 18px; }
.dev-box summary { cursor: pointer; font-weight: 700; min-height: 44px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.dev-off { margin-top: 16px; font-size: var(--cn-step--1); color: var(--cn-ink-2); }
.gated-note { font-size: var(--cn-step--1); color: var(--cn-ink-2); margin: 0; }
.ob-start-options { display: grid; gap: var(--cn-space-3); margin-top: var(--cn-space-4); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) { .ob-start-options { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.lp-ob-opt { display: grid; gap: 4px; padding: var(--cn-space-4); text-align: left; border: var(--cn-border-w) solid var(--cn-line-strong); border-radius: var(--cn-radius-card); background: var(--cn-surface); color: var(--cn-ink); font: inherit; cursor: pointer; transition: border-color var(--cn-dur) var(--cn-ease), background-color var(--cn-dur) var(--cn-ease); }
.lp-ob-opt:hover { border-color: var(--cn-brand); background: var(--cn-brand-soft); }
.lp-ob-opt:focus-visible { outline: 2px solid var(--cn-focus); outline-offset: 2px; }
.lp-ob-opt b { font-size: var(--cn-step-1); }
.lp-ob-opt span { color: var(--cn-ink-2); font-size: var(--cn-step--1); }
.ob-session { font-size: var(--cn-step--1); color: var(--cn-ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 28ch; }
@media (max-width: 640px) {
  .ob-grid-2 { grid-template-columns: minmax(0, 1fr); }
  .ship-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ship-row .icon-x { width: 100%; }
  .secret-item { grid-template-columns: minmax(0, 1fr); }
  .stepper li { flex-basis: 70px; }
  .stepper li .lbl .stp-name { display: none; }
  .ob-session { display: none; }
}

/* Mi cuenta (cuenta.html + cuenta.js): reusa .ob-card/.ob-form del onboarding */
.ob-form > .hint { font-size: var(--cn-step--1); color: var(--cn-ink-2); }
.ac-facts { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 6px 18px; margin: 0 0 var(--cn-space-4); font-size: var(--cn-step--1); }
.ac-facts dt { color: var(--cn-ink-2); }
.ac-facts dd { margin: 0; overflow-wrap: anywhere; font-weight: 600; }
.ac-webs { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--cn-space-3); }
.ac-web { display: grid; gap: var(--cn-space-2); padding: var(--cn-space-4); border: 1px solid var(--cn-line); border-radius: var(--cn-radius-control); }
.ac-web__head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.ac-web__head b { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; font-size: var(--cn-step-1); }

/* 8. ADMIN DE LA COPIA (admin.html) ---------------------------------------- */
.admin-shell { display: grid; grid-template-columns: 260px minmax(0, 1fr); min-height: calc(100vh - 65px); }
.admin-nav { position: sticky; top: 65px; height: calc(100vh - 65px); display: flex; flex-direction: column; gap: var(--cn-space-5); padding: var(--cn-space-6) var(--cn-space-5); border-right: 1px solid var(--cn-line); }
.admin-nav { overflow-y: auto; }
.admin-nav h1 { font-size: var(--cn-step-2); line-height: 1.2; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.admin-nav small { color: var(--cn-ink-2); font-size: var(--cn-step--1); }
.admin-nav nav { display: grid; gap: 4px; }
.admin-nav nav button { min-height: 44px; padding: 0 14px; border: 0; border-radius: var(--cn-radius-control); background: transparent; color: var(--cn-ink); text-align: left; font: 600 var(--cn-step-0)/1 var(--cn-font); cursor: pointer; }
.admin-nav nav button:hover { background: var(--cn-surface-2); }
.admin-nav nav button.active { background: var(--cn-brand-soft); color: var(--cn-brand-ink); }
.admin-nav .danger-link { margin-top: auto; color: var(--cn-danger); }
.admin-content { padding: clamp(24px, 5vw, 64px); max-width: 1200px; width: 100%; }
.admin-loading { display: grid; gap: var(--cn-space-3); justify-items: start; padding: var(--cn-space-5); border-radius: var(--cn-radius-card); background: var(--cn-surface-2); margin-bottom: var(--cn-space-5); }
.panel-heading { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: var(--cn-space-4); margin-bottom: var(--cn-space-6); }
.panel-heading h2 { font-size: var(--cn-step-4); }
.admin-search { width: min(320px, 100%); }
.product-table { display: grid; gap: 8px; }
.product-row { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto 72px; gap: 14px; align-items: center; width: 100%; padding: 8px; text-align: left; border: 1px solid var(--cn-line); border-radius: var(--cn-radius-control); background: var(--cn-surface); color: var(--cn-ink); font: inherit; cursor: pointer; }
.product-row:hover { border-color: var(--cn-line-strong); }
.product-row > img, .row-placeholder { width: 56px; height: 56px; object-fit: cover; border-radius: 8px; background: var(--cn-surface-2); }
.row-placeholder { display: grid; place-items: center; font-weight: 800; }
.row-info { display: grid; min-width: 0; }
.row-info b { overflow-wrap: anywhere; }
.row-info small, .product-row i { color: var(--cn-ink-2); font-style: normal; font-size: var(--cn-step--1); }
.product-row strong { font-variant-numeric: tabular-nums; }
.muted-row { opacity: .6; }
.card-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--cn-space-5); padding: clamp(18px, 3vw, 28px); background: var(--cn-surface); border: 1px solid var(--cn-line); border-radius: var(--cn-radius-card); }
.card-form .wide { grid-column: 1 / -1; }
.card-form .cn-fieldset { padding: 14px 16px; border: 1px solid var(--cn-line); border-radius: var(--cn-radius-control); }
.card-form .cn-fieldset > legend { padding: 0 6px; }
.toggle-grid { display: flex; gap: 12px 24px; flex-wrap: wrap; }
.theme-origin { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; padding: 16px; margin-bottom: 18px; border-radius: var(--cn-radius-control); background: var(--cn-surface-2); }
.theme-origin small { display: block; color: var(--cn-ink-2); }
.swatches { display: flex; }
.swatches i { width: 26px; height: 26px; margin-left: -5px; border: 2px solid var(--cn-surface); border-radius: 50%; }
.assistant-card, .proposal { display: grid; gap: var(--cn-space-4); padding: clamp(18px, 3vw, 28px); background: var(--cn-surface); border: 1px solid var(--cn-line); border-radius: var(--cn-radius-card); }
.assistant-card form { display: grid; gap: 12px; }
.prompt-examples { display: flex; flex-wrap: wrap; gap: 8px; }
.proposal { margin-top: var(--cn-space-5); border-color: var(--cn-brand); }
.proposal ul { margin: 0; padding-left: 1.2em; }
.proposal-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.edit-dialog { width: min(640px, calc(100vw - 32px)); max-height: calc(100vh - 32px); padding: 0; border: 0; border-radius: var(--cn-radius-card); background: var(--cn-surface); color: var(--cn-ink); box-shadow: var(--cn-shadow-3); }
.edit-dialog::backdrop { background: var(--cn-scrim); }
.edit-dialog form { display: grid; gap: var(--cn-space-4); padding: clamp(20px, 4vw, 36px); }
.edit-dialog h2 { font-size: var(--cn-step-3); }
.edit-dialog > .cn-close { position: absolute; top: 14px; right: 14px; margin: 0; }
@media (max-width: 900px) {
  .admin-shell { grid-template-columns: minmax(0, 1fr); }
  .admin-nav { position: static; height: auto; border-right: 0; border-bottom: 1px solid var(--cn-line); padding: var(--cn-space-5) var(--cn-gutter); }
  .admin-nav nav { display: flex; overflow-x: auto; }
  .admin-nav .danger-link { margin-top: 0; }
}
@media (max-width: 640px) {
  .card-form { grid-template-columns: minmax(0, 1fr); }
  .product-row { grid-template-columns: 48px minmax(0, 1fr) auto; }
  .product-row > img, .row-placeholder { width: 48px; height: 48px; }
  .product-row i { display: none; }
}

/* Utilidad heredada que usa el JS de onboarding (equivale a .cn-sr-only) */
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }