/* =========================================================
   letsgodrop v2 · la plataforma
   Lo nuevo de la v2 con el mismo paradigma que la v1: blanco o negro, cristal arriba, un color por fase,
   iconos planos en su baldosa, cifras en baldosas y nada de cajas dentro de cajas (dentro de una tarjeta, filas con
   su línea). Aquí: la cabecera con tu cuenta, la portada (la plataforma), entrar y crear la cuenta, tu panel, cada
   sección (ganadores, herramientas, legal, resultados, comunidad, soporte, prompts, cuenta y equipo) y los pasos
   nuevos (2.2, 2.4, 3.1 con Higgsfield, 3.4, 4.5, 5.6, 5.4o y 5.5o).
   ========================================================= */

/* ====== Vistas nuevas ====== */
body[data-vista="acceso"] .vista--acceso,
body[data-vista="panel"] .vista--panel,
body[data-vista="sec"] .vista--sec { display: block; animation: vistaIn .6s var(--ease-out-quint) both; }
body[data-auth="cargando"] .app { visibility: hidden; }
body[data-vista="acceso"] .ambient, body[data-vista="panel"] .ambient, body[data-vista="sec"] .ambient { opacity: calc(var(--amb) * 0.62); }
.vista--panel, .vista--sec { padding: 18px var(--gut) 110px; }
.vista--acceso { padding: 22px var(--gut) 80px; }

/* ====== Cabecera: Entrar, Menú y tu cuenta ====== */
body[data-auth="in"] .top__entrar, body[data-auth="in"] .top__cta, body[data-auth="in"] #hero-login { display: none; }
body:not([data-auth="in"]) #btn-tools, body:not([data-auth="in"]) #btn-nivel, body:not([data-auth="in"]) .top__yo { display: none; }
body[data-vista="acceso"] .top__entrar, body[data-vista="acceso"] .top__cta { display: none; }
body:not([data-auth="in"]) .snav { opacity: 0; pointer-events: none; }
.top__yo { display: inline-grid; place-items: center; text-decoration: none; border-radius: 50%; transition: transform .45s var(--ease-spring); }
.top__yo:hover { transform: scale(1.06); }
.top__yo:focus-visible { outline: 3px solid rgba(var(--brand-rgb), 0.45); outline-offset: 2px; }
.avatar {
  --hue: 220;
  display: inline-grid; place-items: center; flex: none; width: 38px; height: 38px; border-radius: 50%;
  font-size: 14px; font-weight: 700; letter-spacing: -0.02em; color: #fff;
  background: linear-gradient(140deg, hsl(var(--hue) 78% 62%), hsl(calc(var(--hue) + 40) 72% 48%));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.25), 0 4px 10px -6px rgba(0, 0, 0, 0.4);
}
.avatar--sm { width: 30px; height: 30px; font-size: 12px; }
.hero__login { margin: 18px 0 0; font-size: 15px; color: var(--ink-soft); }

/* El menú: las secciones en dos columnas */
.pop--menu { width: min(560px, calc(100vw - 24px)); }
.pop__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px; }
.pop--menu .pop__i { text-decoration: none; color: var(--ink); }
.pop--menu .pop__i .gi { --s: 34px; }
.pop__foot { display: flex; justify-content: space-between; gap: 12px; }

/* ====== Portada: la plataforma ====== */
.tres { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 10px; max-width: 980px; margin: 0 auto 36px; }
.tres__n { display: grid; justify-items: center; gap: 8px; text-align: center; min-width: 120px; }
.tres__n b { font-size: 15.5px; font-weight: 680; letter-spacing: -0.02em; }
.tres__n small { font-size: 13px; color: var(--ink-muted); }
.tres__n .gi, .tres__n .logo-tile { --s: 52px; }
.tres__l { flex: 0 1 60px; height: 2px; border-radius: 2px; background: var(--fill); position: relative; overflow: hidden; }
.tres__l i { position: absolute; inset: 0; width: 40%; background: linear-gradient(90deg, transparent, var(--brand), transparent); animation: tresL 2.4s var(--ease-soft) infinite; }
@keyframes tresL { from { transform: translateX(-100%); } to { transform: translateX(260%); } }
.plat__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.plat__grid li { display: grid; gap: 10px; align-content: start; padding: 22px; border-radius: 26px; background: var(--card); border: 1px solid var(--line-2); box-shadow: var(--shadow-sm); }
:root[data-theme="dark"] .plat__grid li { border-color: var(--line); box-shadow: none; }
.plat__grid b { font-size: 17px; font-weight: 680; letter-spacing: -0.025em; }
.plat__grid p { margin: 0; font-size: 14.5px; line-height: 1.45; color: var(--ink-soft); }
.need__list { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.need__gi { --s: 44px; }

/* ====== Entrar y crear la cuenta ====== */
.acc { max-width: 1040px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 440px); gap: 56px; align-items: center; min-height: calc(100vh - var(--top-h) - 120px); }
.acc__logo { margin-bottom: 26px; }
.acc__h { margin: 0 0 26px; font-size: clamp(32px, 3.6vw, 46px); font-weight: 750; line-height: 1.04; letter-spacing: -0.045em; text-wrap: balance; }
.acc__h em { font-style: normal; color: var(--brand-ink); }
.acc__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.acc__list li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 14px; align-items: start; }
.acc__list span b { display: block; font-size: 16px; font-weight: 650; letter-spacing: -0.02em; }
.acc__list span { font-size: 14.5px; color: var(--ink-soft); line-height: 1.45; }
.acc__card { display: grid; gap: 14px; padding: 26px; border-radius: 30px; box-shadow: var(--shadow-lg); }
.acc__tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; border-radius: 999px; background: var(--fill-2); }
.acc__tab { display: grid; place-items: center; height: 38px; border-radius: 999px; font-size: 14.5px; font-weight: 600; color: var(--ink-soft); text-decoration: none; transition: background .25s, color .25s; }
.acc__tab.is-on { background: var(--card); color: var(--ink); box-shadow: var(--shadow-sm); }
.acc__t { margin: 6px 0 0; font-size: 28px; font-weight: 740; letter-spacing: -0.04em; line-height: 1.08; }
.acc__d { margin: -6px 0 4px; font-size: 15px; color: var(--ink-soft); line-height: 1.45; }
.acc__eye { margin-right: -6px; }
.acc__msg { margin: 0; min-height: 0; font-size: 14px; color: var(--danger-text); line-height: 1.45; }
.acc__msg:empty { display: none; }
.acc__alt, .acc__legal { margin: 0; text-align: center; font-size: 14px; color: var(--ink-muted); }
.acc__legal { font-size: 12.5px; }
.codigo { margin: 20px 0 0; padding: 18px; border-radius: 18px; background: var(--code); border: 1px dashed var(--line-strong); text-align: center; font-family: var(--font-mono); font-size: clamp(20px, 4vw, 28px); font-weight: 500; letter-spacing: 0.06em; user-select: all; -webkit-user-select: all; }
.iconbtn--sm { width: 32px; height: 32px; }
.iconbtn--sm .ic { width: 15px; height: 15px; }

/* ====== Cabecera de sección ====== */
.sec2 { max-width: var(--maxw); margin: 0 auto; display: grid; gap: 22px; }
.sec2--narrow { max-width: 820px; }
.sh { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; column-gap: 18px; align-items: center; margin: 4px 0 6px; }
.sh .gi { --s: 58px; align-self: start; }
.sh .kicker { margin: 0 0 4px; }
.sh .kicker a { color: inherit; text-decoration: none; }
.sh .kicker a:hover { text-decoration: underline; text-underline-offset: 3px; }
.sh__h { margin: 0; font-size: clamp(30px, 3.4vw, 46px); font-weight: 740; line-height: 1.04; letter-spacing: -0.045em; text-wrap: balance; }
.sh__h em { font-style: normal; color: var(--hc); }
.sh__d { margin: 10px 0 0; font-size: 17.5px; line-height: 1.45; letter-spacing: -0.018em; color: var(--ink-soft); max-width: 62ch; text-wrap: pretty; }
.sh__x { align-self: start; }
.sec2__k { display: flex; align-items: center; gap: 10px; margin: 10px 0 0; font-size: 15px; font-weight: 650; letter-spacing: -0.02em; color: var(--ink-soft); }
.sec2__k .gi { --s: 28px; }
.cargando { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 48px 0; color: var(--ink-muted); font-size: 15px; }
.spin { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--fill); border-top-color: var(--brand); animation: spin .8s linear infinite; }
.back { margin: 0; }
.sp { flex: 1; }
.link--bad { color: var(--danger-text) !important; }
.boceto-nota { display: none; }
body.boceto .boceto-nota { display: flex; gap: 10px; align-items: flex-start; margin: 0; padding: 12px 14px; border-radius: 16px; border: 1.5px dashed var(--warn-fill); background: var(--warn-soft); font-size: 14px; color: var(--ink-2); line-height: 1.45; }
body.boceto .boceto-nota .ic { color: var(--warn); margin-top: 1px; }
.dlg__badge--ok { background: #12a15a; }
.dlg__img { display: block; width: 100%; height: auto; border-radius: 16px; margin-top: 8px; }

/* ====== Bloqueado y tus tres registros ====== */
.lock { max-width: 640px; justify-items: center; text-align: center; padding-top: 40px; }
.lock__ic { --s: 64px; }
.lock .sh__h em { color: var(--brand-ink); }
.lock__alt { margin: 0; font-size: 14.5px; color: var(--ink-muted); }
.regs { list-style: none; margin: 0; padding: 0; width: 100%; display: grid; text-align: left; }
.reg { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 12px 0; border-top: 1px solid var(--line-2); }
.reg:first-child { border-top: 0; }
.reg .gi, .reg .logo-tile { --s: 40px; }
.reg__t b { display: block; font-size: 15.5px; font-weight: 650; letter-spacing: -0.02em; }
.reg__t small { display: block; font-size: 13.5px; color: var(--ink-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.reg.is-ok .reg__t small { color: var(--ok); }

/* ====== Tu panel ====== */
.pan { max-width: var(--maxw); margin: 0 auto; display: grid; gap: 22px; }
.pan__hero { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 32px; align-items: center; padding: 18px 0 8px; }
.pan__t { margin: 0; font-size: clamp(38px, 4.6vw, 62px); font-weight: 760; line-height: 1; letter-spacing: -0.05em; }
.pan__t em { font-style: normal; background: linear-gradient(100deg, #2f6bff 10%, #7c5cff 85%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
:root[data-theme="dark"] .pan__t em { background-image: linear-gradient(100deg, #5b97ff 10%, #a48bff 85%); }
.pan__d { margin: 14px 0 0; font-size: 18px; line-height: 1.45; color: var(--ink-soft); max-width: 52ch; }
.pan__cta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.pan__ring { position: relative; display: grid; place-items: center; }
.pan__ring > span { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.pan__ring b { font-size: 30px; font-weight: 760; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
.pan__ring small { font-size: 13px; color: var(--ink-muted); }
.pan__regs .regs { margin-top: 2px; }
.pan__xp { display: grid; gap: 16px; }
.pan__lv { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 14px; align-items: center; }
.pan__lvn { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 16px; font-size: 24px; font-weight: 800; color: #fff; background: var(--grad-brand); box-shadow: 0 10px 22px -12px rgba(47, 107, 255, 0.7); }
.pan__lv b { display: block; font-size: 17px; font-weight: 680; letter-spacing: -0.02em; }
.pan__lv small { display: block; font-size: 13.5px; color: var(--ink-muted); }
.pan__pts { text-align: right; }
.pan__pts b { font-size: 26px; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
.pan__bar { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 5px; }
.pan__bar i { height: 8px; border-radius: 999px; background: var(--fill); }
.pan__bar i.is-done { background: var(--h2); }
.insig { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.insig li { display: inline-flex; align-items: center; gap: 8px; padding: 4px 12px 4px 4px; border-radius: 999px; background: var(--fill-2); font-size: 13px; font-weight: 560; color: var(--ink-muted); cursor: default; }
.insig li .gi { --s: 26px; --h2: #b4b4bb; border-radius: 50%; box-shadow: none; }
:root[data-theme="dark"] .insig li .gi { --h2: #48484f; }
.insig li.is-on { color: var(--ink); background: color-mix(in srgb, var(--ok-fill) 12%, transparent); }
.insig li.is-on .gi { --h2: #12a15a; }
.pan__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.pan__grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ptile { display: grid; gap: 8px; align-content: start; height: 100%; padding: 20px; border-radius: 24px; text-decoration: none; color: var(--ink); background: var(--card); border: 1px solid var(--line-2); box-shadow: var(--shadow-sm); transition: transform .45s var(--ease-spring), box-shadow .35s var(--ease-soft), border-color .3s; }
:root[data-theme="dark"] .ptile { border-color: var(--line); box-shadow: none; }
.ptile:hover { transform: translate3d(0, -3px, 0); box-shadow: var(--shadow-md); border-color: color-mix(in srgb, var(--h2) 40%, var(--line-2)); }
.ptile .gi { --s: 44px; margin-bottom: 4px; }
.ptile__t { font-size: 17px; font-weight: 680; letter-spacing: -0.025em; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ptile__d { font-size: 14px; color: var(--ink-soft); line-height: 1.4; display: flex; align-items: center; gap: 6px; }
.ptile__d .ic { width: 14px; height: 14px; }
.ptile.is-locked { background: transparent; border-style: dashed; box-shadow: none; }
.ptile.is-locked .gi { --h2: #a1a1a8; }
.ptile.is-locked .ptile__d { color: var(--ink-muted); }
.pan__feed { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.pan__feed:empty { display: none; }
.pf { display: grid; gap: 12px; align-content: start; }
.pf ul { list-style: none; margin: 0; padding: 0; display: grid; }
.pf li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; align-items: center; padding: 10px 0; border-top: 1px solid var(--line-2); }
.pf li:first-child { border-top: 0; padding-top: 0; }
.pf img { width: 44px; height: 44px; border-radius: 12px; object-fit: cover; background: var(--fill-2); }
.pf b { display: block; font-size: 15px; font-weight: 620; letter-spacing: -0.015em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pf small { display: block; font-size: 13px; color: var(--ink-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ====== Productos ganadores ====== */
.gpost { display: grid; gap: 18px; padding: 24px; border-radius: 30px; background: var(--card); border: 1px solid var(--line-2); box-shadow: var(--shadow-sm); }
:root[data-theme="dark"] .gpost { border-color: var(--line); box-shadow: none; }
.gpost + .gpost { margin-top: 18px; }
.gpost .kicker { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.gpost__t { margin: 0; font-size: 26px; font-weight: 720; letter-spacing: -0.035em; }
.gpost__n { margin: 8px 0 0; font-size: 15px; color: var(--ink-soft); line-height: 1.5; max-width: 80ch; }
.gprods { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.gprod { display: grid; grid-template-rows: auto 1fr; border-radius: 22px; overflow: hidden; background: var(--card-2); border: 1px solid var(--line-2); }
:root[data-theme="dark"] .gprod { border-color: var(--line); }
.gprod__img { position: relative; margin: 0; aspect-ratio: 4 / 3; background: var(--fill-2); display: grid; place-items: center; }
.gprod__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; }
.gprod__ph .ic { width: 30px; height: 30px; color: var(--ink-muted); }
.gprod__cat { position: absolute; left: 10px; top: 10px; z-index: 2; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; color: var(--ink); background: var(--glass-strong); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.gprod__b { display: grid; gap: 10px; align-content: start; padding: 16px; }
.gprod__t { margin: 0; font-size: 17px; font-weight: 680; letter-spacing: -0.025em; line-height: 1.2; }
.gprod__w { margin: 0; font-size: 13.5px; color: var(--ink-soft); line-height: 1.45; }
.gprod__nums { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; margin: 2px 0 0; }
.gprod__nums div { display: grid; gap: 2px; }
.gprod__nums dt { font-size: 11.5px; color: var(--ink-muted); }
.gprod__nums dd { margin: 0; font-size: 15px; font-weight: 680; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.gprod__acts { display: flex; flex-wrap: wrap; gap: 8px; }

/* ====== Herramientas ====== */
.tools__src { margin: 0; font-size: 13.5px; }
.tool__in { display: grid; gap: 16px; align-content: start; }
.rt__bars { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 10px; }
.rt__bars li { display: grid; grid-template-columns: 140px minmax(0, 1fr) auto; gap: 12px; align-items: center; font-size: 14px; color: var(--ink-soft); }
.rt__bars i { height: 12px; border-radius: 999px; background: var(--fill-2); position: relative; overflow: hidden; }
.rt__bars i::after { content: ''; position: absolute; inset: 0 auto 0 0; width: var(--w); border-radius: inherit; background: var(--col); transition: width .9s var(--ease-out-quint); }
.rt__bars b { color: var(--ink); font-variant-numeric: tabular-nums; }
.aud { display: grid; gap: 16px; max-width: 980px; }
.aud__add { display: grid; grid-template-columns: minmax(0, 1fr) 170px auto; gap: 10px; }
.aud__add .btn { height: 50px; }
.aud__list { list-style: none; margin: 0; padding: 0; display: grid; border-radius: 24px; background: var(--card); border: 1px solid var(--line-2); overflow: hidden; }
.aud__list li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; gap: 14px; align-items: center; padding: 12px 16px; border-top: 1px solid var(--line-2); }
.aud__list li:first-child { border-top: 0; }
.aud__list li[data-st="valida"] { background: color-mix(in srgb, var(--ok-fill) 7%, transparent); }
.aud__list li[data-st="no"] .aud__t { color: var(--ink-muted); text-decoration: line-through; }
.aud__n { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; font-size: 13.5px; font-weight: 700; color: var(--hc); background: color-mix(in srgb, var(--hc) 13%, transparent); }
.aud__t { font-size: 15.5px; font-weight: 600; letter-spacing: -0.015em; }
.aud__t small { display: block; font-size: 12.5px; font-weight: 500; color: var(--ink-muted); }
.aud__st { display: flex; flex-wrap: wrap; gap: 4px; }
.aud__st .pill { height: 30px; padding: 0 11px; font-size: 13px; }
.aud__mv { display: flex; gap: 4px; }
.aud__empty { margin: 0; padding: 28px; text-align: center; color: var(--ink-muted); border: 1px dashed var(--line-strong); border-radius: 22px; }

/* ====== Zona legal ====== */
.legal__gen { display: grid; gap: 14px; align-content: start; }
.legal__list { list-style: none; margin: 0; padding: 0; display: grid; }
.legal__list li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 14px; padding: 11px 0; border-top: 1px solid var(--line-2); font-size: 14.5px; }
.legal__list li:first-child { border-top: 0; padding-top: 2px; }
.legal__list .link { font-size: 13.5px; display: inline-flex; align-items: center; gap: 4px; }
.legal__list .link .ic { width: 13px; height: 13px; }

.file-in { font: inherit; font-size: 14px; color: var(--ink-soft); }
.file-in::file-selector-button { font: inherit; font-size: 13.5px; font-weight: 600; margin-right: 10px; padding: 8px 14px; border-radius: 999px; border: 0; background: var(--fill-2); color: var(--ink); cursor: pointer; }
.pan__inc { display: flex; gap: 10px; align-items: flex-start; margin: 0; padding: 12px 14px; border-radius: 16px; background: var(--warn-soft); font-size: 14px; line-height: 1.45; color: var(--ink-2); }
.pan__inc .ic { color: var(--warn); margin-top: 1px; }
.likeb { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border: 0; border-radius: 999px; background: var(--fill-2); color: var(--ink-soft); font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer; transition: transform .45s var(--ease-spring), background .25s, color .25s; }
.likeb .ic { width: 16px; height: 16px; }
.likeb:hover { background: var(--fill); }
.likeb:active { transform: scale(0.92); }
.likeb.is-on { color: #e8335c; background: rgba(232, 51, 92, 0.1); }
.likeb.is-on .ic path { fill: currentColor; }

/* ====== Comunidad (como Skool) ====== */
.avatar--xs { width: 22px; height: 22px; font-size: 9.5px; box-shadow: 0 0 0 2px var(--card); }
.avatar--img { padding: 0; object-fit: cover; background: var(--fill-2); }
.skav { position: relative; display: inline-grid; flex: none; }
.skav .avatar { width: 40px; height: 40px; }
.skav--sm .avatar { width: 30px; height: 30px; font-size: 12px; }
.skav--lg .avatar { width: 48px; height: 48px; font-size: 17px; }
.skav__lv { position: absolute; right: -4px; bottom: -3px; display: grid; place-items: center; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 999px; font-style: normal; font-size: 10.5px; font-weight: 750; color: #fff; background: #2f6bff; box-shadow: 0 0 0 2px var(--card); }
.skav--sm .skav__lv { min-width: 15px; height: 15px; font-size: 9px; right: -5px; }
.sk { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 22px; align-items: start; }
.sk__main { display: grid; gap: 14px; min-width: 0; }
.sk__new { display: grid; gap: 12px; padding: 14px 16px; }
.sk__top { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; align-items: center; }
.sk__top input { font: inherit; font-size: 16px; font-weight: 550; border: 0; background: var(--fill-2); border-radius: 14px; padding: 12px 16px; color: var(--ink); outline: none; min-width: 0; }
.sk__top input:focus { box-shadow: 0 0 0 3px rgba(var(--brand-rgb), 0.3); background: var(--card); }
.sk__more { display: grid; gap: 12px; }
.sk__more textarea { width: 100%; resize: vertical; min-height: 96px; }
.sk__res { display: grid; gap: 12px; padding: 14px; border-radius: 18px; background: var(--fill-2); }
.sk__aviso { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 13px; color: var(--ink-muted); }
.sk__aviso .ic { width: 15px; height: 15px; }
.sk__fotos { display: flex; flex-wrap: wrap; gap: 8px; }
.sk__fotos:empty { display: none; }
.sk__ft { position: relative; width: 76px; height: 76px; border-radius: 14px; overflow: hidden; background: var(--fill-2); }
.sk__ft img { width: 100%; height: 100%; object-fit: cover; }
.sk__ft button { position: absolute; top: 4px; right: 4px; display: grid; place-items: center; width: 22px; height: 22px; padding: 0; border: 0; border-radius: 50%; color: #fff; background: rgba(0, 0, 0, 0.6); cursor: pointer; }
.sk__ft button .ic { width: 12px; height: 12px; }
.sk__bar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.sk__bar .fld__box { width: 160px; height: 40px; }
.sk__adj { position: relative; overflow: hidden; cursor: pointer; }
.sk__adj input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.sk__cats { display: flex; flex-wrap: wrap; gap: 6px; }
.sk__cats .pill { height: 34px; font-size: 14px; }
.skfeed { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.skp { border-radius: 20px; background: var(--card); border: 1px solid var(--line-2); box-shadow: var(--shadow-sm); transition: transform .45s var(--ease-spring), box-shadow .35s; }
:root[data-theme="dark"] .skp { border-color: var(--line); box-shadow: none; }
.skp:hover { transform: translate3d(0, -2px, 0); box-shadow: var(--shadow-md); }
.skp.is-pin { border-color: color-mix(in srgb, #f5a623 45%, var(--line-2)); background: color-mix(in srgb, #f5a623 5%, var(--card)); }
.skp.is-dest { border: 1.5px solid color-mix(in srgb, var(--warn-fill) 60%, transparent); box-shadow: 0 16px 36px -22px rgba(242, 114, 26, 0.6); }
.skp__a { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px; padding: 16px 18px; text-decoration: none; color: var(--ink); align-items: start; }
.skp__b { display: grid; gap: 7px; min-width: 0; }
.skp__dest { display: inline-flex; align-items: center; gap: 6px; justify-self: start; margin: 0; padding: 3px 10px; border-radius: 999px; font-size: 12.5px; font-weight: 650; color: var(--warn); background: var(--warn-soft); }
.skp__dest .ic { width: 14px; height: 14px; }
.skp__who { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: center; margin: 0; }
.skp__meta { min-width: 0; }
.skp__meta b { font-size: 14.5px; font-weight: 650; }
.skp__imp { font-size: 12.5px; font-weight: 500; color: var(--ink-muted); }
.skp__meta small { display: block; font-size: 12.5px; color: var(--ink-muted); }
.skp__pin { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; font-weight: 600; color: #c47d00; }
.skp__pin .ic { width: 14px; height: 14px; }
.skp__t { margin: 2px 0 0; font-size: 17.5px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.3; }
.skp__x { margin: 0; font-size: 14.5px; line-height: 1.5; color: var(--ink-soft); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.skp__res { display: flex; align-items: center; gap: 10px; margin: 0; }
.skp__res b { font-size: 20px; font-weight: 760; letter-spacing: -0.03em; color: var(--ok); font-variant-numeric: tabular-nums; }
.skp__f { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; margin: 2px 0 0; font-size: 13.5px; color: var(--ink-muted); }
.skp__f > span { display: inline-flex; align-items: center; gap: 5px; }
.skp__f .ic { width: 15px; height: 15px; }
.skp__f .is-on { color: #e8335c; }
.skp__avs { display: inline-flex; }
.skp__avs .avatar + .avatar { margin-left: -6px; }
.skp__new { color: #2f6bff; font-weight: 550; }
.skp__img { position: relative; width: 112px; height: 112px; border-radius: 14px; overflow: hidden; background: var(--fill-2); }
.skp__img img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.skp__img i { position: absolute; right: 6px; bottom: 6px; padding: 2px 7px; border-radius: 999px; font-style: normal; font-size: 12px; font-weight: 650; color: #fff; background: rgba(0, 0, 0, 0.6); }
.sk__mas { margin-top: 4px; }
.sk__side { display: grid; gap: 14px; position: sticky; top: calc(var(--top-h) + 10px); }
.sk__about { display: grid; gap: 10px; padding: 0 0 16px; overflow: hidden; }
.sk__about > *:not(.sk__cover) { margin-left: 16px; margin-right: 16px; }
.sk__cover { display: grid; place-items: center; height: 120px; background: linear-gradient(130deg, #0a7cff, #7c5cff 60%, #ff5c8a); }
.sk__logo { width: 64px; height: 64px; filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.25)); }
.sk__name { margin: 4px 0 0; font-size: 17px; font-weight: 720; letter-spacing: -0.02em; }
.sk__url { margin: -6px 0 0; font-size: 13px; color: var(--ink-muted); }
.sk__bul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font-size: 14px; color: var(--ink-2); }
.sk__bul li::before { content: '●'; margin-right: 8px; font-size: 9px; vertical-align: 2px; color: var(--ink-muted); }
.sk__stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 10px 0; border-top: 1px solid var(--line-2); border-bottom: 1px solid var(--line-2); text-align: center; }
.sk__stats span { display: grid; font-size: 12.5px; color: var(--ink-muted); }
.sk__stats span + span { border-left: 1px solid var(--line-2); }
.sk__stats b { font-size: 18px; font-weight: 720; color: var(--ink); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.sk__rank, .sk__ins, .sk__rules { display: grid; gap: 10px; }
.sk__rank ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.sk__rank li { display: grid; grid-template-columns: 20px auto minmax(0, 1fr) auto; gap: 10px; align-items: center; font-size: 14px; }
.sk__rank b { font-weight: 620; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sk__pos { font-size: 13px; font-weight: 700; color: var(--ink-muted); text-align: center; }
.sk__pts { font-size: 13px; font-weight: 650; color: #2f6bff; }
.sk__vacio, .sk__rules p { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--ink-soft); }
.skd { display: grid; gap: 14px; padding: 24px; }
.skd__imp { display: flex; gap: 10px; align-items: flex-start; margin: 0; padding: 12px 14px; border-radius: 16px; background: var(--fill-2); font-size: 13.5px; line-height: 1.5; color: var(--ink-soft); }
.skd__imp .ic { flex: none; width: 16px; height: 16px; margin-top: 2px; color: var(--ink-muted); }
.skd__t { margin: 0; font-size: 26px; font-weight: 740; letter-spacing: -0.035em; line-height: 1.2; }
.skd__x { font-size: 16px; line-height: 1.6; color: var(--ink-2); overflow-wrap: anywhere; }
.skd__gal { display: grid; gap: 8px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.skd__gal[data-n="1"] { grid-template-columns: minmax(0, 1fr); }
.skd__gal[data-n="3"] .skd__img:first-child { grid-row: span 2; }
.skd__img { display: block; padding: 0; border: 0; border-radius: 14px; overflow: hidden; cursor: zoom-in; background: var(--fill-2); }
.skd__img img { display: block; width: 100%; height: 100%; max-height: 520px; object-fit: cover; object-position: top; }
.skd__gal[data-n="1"] .skd__img img { object-fit: contain; max-height: 640px; }
.pf__a { display: contents; color: inherit; text-decoration: none; }
.com__nuevas { justify-self: center; display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 16px; border: 0; border-radius: 999px; font: inherit; font-size: 14px; font-weight: 600; color: var(--on-brand); background: var(--brand); box-shadow: 0 10px 22px -12px rgba(var(--brand-rgb), 0.8); cursor: pointer; animation: okPop .5s var(--ease-spring) both; }
.coms { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.coms li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; }
.coms li > div { padding: 12px 16px; border-radius: 18px; background: var(--fill-2); min-width: 0; }
.coms p { margin: 0; font-size: 14.5px; line-height: 1.5; overflow-wrap: anywhere; }
.coms p:first-child { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.coms small { font-size: 12.5px; color: var(--ink-muted); }
.coms .link--bad { margin-left: auto; font-size: 12.5px; }
.com__reply { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: end; }
.com__reply textarea { width: 100%; resize: vertical; min-height: 46px; }

/* ====== Soporte ====== */
.chat { display: grid; gap: 14px; min-height: 120px; }
.chat__hi { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 14px; align-items: start; padding: 18px; border-radius: 22px; background: var(--fill-2); }
.chat__hi p { margin: 0; font-size: 15px; line-height: 1.5; color: var(--ink-soft); }
.chat__q { justify-self: end; max-width: 80%; padding: 12px 16px; border-radius: 20px 20px 6px 20px; color: var(--on-brand); background: var(--brand); }
.chat__q p { margin: 0; font-size: 15px; line-height: 1.45; }
.chat__a { display: grid; gap: 10px; max-width: 92%; }
.ans { display: grid; gap: 6px; padding: 16px 18px; border-radius: 20px 20px 20px 6px; background: var(--card); border: 1px solid var(--line-2); box-shadow: var(--shadow-sm); }
:root[data-theme="dark"] .ans { border-color: var(--line); box-shadow: none; }
.ans p { margin: 0; font-size: 14.5px; line-height: 1.5; color: var(--ink-2); }
.ans__k { display: flex; align-items: center; gap: 6px; font-size: 12.5px !important; font-weight: 650; color: var(--ink-muted) !important; }
.ans__k .ic { width: 14px; height: 14px; }
.ans--p.is-top { border-color: color-mix(in srgb, var(--ok-fill) 45%, var(--line-2)); }
.ans--p.is-top .ans__k { color: var(--ok) !important; }
.ans__t { font-size: 16px !important; font-weight: 680; color: var(--ink) !important; letter-spacing: -0.02em; }
.ans__x { color: var(--ink-soft) !important; font-style: italic; }
.ans .link { display: inline-flex; align-items: center; gap: 5px; font-size: 14px; }
.ans .link .ic { width: 14px; height: 14px; }
.chat__in { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; padding: 10px; position: sticky; bottom: 14px; box-shadow: var(--shadow-md); }
.chat__in .btn { height: 50px; }
.chat__sug { justify-content: center; }

/* ====== Prompts ====== */
.pr__fase { display: grid; gap: 12px; }
.pr__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.pr { display: grid; gap: 8px; align-content: start; min-width: 0; }
.pr__h { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin: 0; font-size: 15.5px; }
.pr__h b { font-weight: 650; letter-spacing: -0.02em; }
.pr__h .link { font-size: 13.5px; }
.prompt--sm .prompt__text { font-size: 14px; max-height: 180px; overflow: auto; }

/* ====== Mi cuenta y el equipo ====== */
.cu { display: grid; gap: 12px; }
.cu summary { cursor: pointer; font-size: 15px; font-weight: 600; list-style: none; }
.cu summary::-webkit-details-marker { display: none; }
.cu summary::after { content: '›'; float: right; color: var(--ink-muted); transition: transform .25s; }
.cu[open] summary::after { transform: rotate(90deg); }
.cu[open] summary { margin-bottom: 12px; }
.cu--bad summary { color: var(--danger-text); }
.bento--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.bento--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.adm__g { display: grid; gap: 14px; }
.adm__g textarea { width: 100%; resize: vertical; font-family: var(--font-mono); font-size: 13px; }
.adm__prev { list-style: none; margin: 0; padding: 0; display: grid; }
.adm__prev li { display: grid; grid-template-columns: 48px minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 12px; align-items: center; padding: 10px 0; border-top: 1px solid var(--line-2); }
.adm__prev img, .adm__prev li > span:first-child { width: 48px; height: 48px; border-radius: 12px; object-fit: cover; background: var(--fill-2); }
.adm__prev b { display: block; font-size: 14.5px; }
.adm__prev small { font-size: 12.5px; color: var(--ink-muted); }
.adm__q { list-style: none; margin: 0; padding: 0; display: grid; max-height: 420px; overflow: auto; }
.adm__q li { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-top: 1px solid var(--line-2); font-size: 14px; }
.adm__q li:first-child { border-top: 0; }
.adm__q small { flex: none; font-size: 12.5px; color: var(--ink-muted); }

/* ====== Pasos nuevos ====== */
/* 1.4 · qué dirección se ha comprobado y la salida manual */
.verify__host { display: block; margin-top: 4px; font-size: 13px; color: var(--ink-muted); }
.verify__host b { font-family: var(--font-mono); font-weight: 500; color: var(--ink-soft); }
.verify .fld__help { margin-top: -2px; }
.verify .fld__help b { font-family: var(--font-mono); font-weight: 600; color: var(--ink-soft); }
.verify__manual { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 12px 14px; border-radius: 16px; background: var(--fill-2); font-size: 14px; color: var(--ink-soft); }
/* 2.2 · verificar el proveedor */
.vprov { padding-top: 6px; }
.vprov__st { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 14px; color: var(--ink-soft); }
.vprov__st .ic { width: 18px; height: 18px; color: var(--ok); }
.paso.is-done .vprov__st .dot { display: none; }
.vprov__b summary { cursor: pointer; font-size: 14px; color: var(--brand-ink); font-weight: 550; }
.vprov__b .verify { margin-top: 8px; }
.verify--sm .verify__row .btn { height: 44px; }
/* 2.4 · más productos */
.mas { display: grid; gap: 10px; margin-top: 12px; }
.mas__k { margin: 0; font-size: 14px; color: var(--ink-soft); }
.mas__k b { color: var(--ink); }
.mas__list { list-style: none; margin: 0; padding: 0; display: grid; border-radius: 18px; background: var(--card); border: 1px solid var(--line-2); overflow: hidden; }
.mas__list li { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto auto; gap: 10px; align-items: center; padding: 8px 10px; border-top: 1px solid var(--line-2); }
.mas__list li:first-child { border-top: 0; }
.mas__img { width: 40px; height: 40px; border-radius: 10px; overflow: hidden; background: var(--fill-2); }
.mas__img img { width: 100%; height: 100%; object-fit: cover; }
.mas__n { font-size: 14.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mas__m { font-size: 13px; font-variant-numeric: tabular-nums; }
.mas .btn { justify-self: start; }
/* 3.1 · la tercera vista, Higgsfield */
.paso[data-view="ask"] .v-higgs, .paso[data-view="tuto"] .v-higgs, .paso[data-view="higgs"] .v-ask, .paso[data-view="higgs"] .v-tuto { display: none; }
.copyline { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; }
.copyline code { padding: 8px 12px; border-radius: 12px; background: var(--code); border: 1px solid var(--line-2); font-family: var(--font-mono); font-size: 13.5px; overflow-wrap: anywhere; }
.conn { display: grid; gap: 14px; padding: 26px; border-radius: 22px; background: var(--card); border: 1px solid var(--line-2); box-shadow: var(--shadow-lg); max-width: 520px; margin: 0 auto; }
.conn__h { margin: 0; font-size: 18px; font-weight: 700; letter-spacing: -0.02em; }
.conn__f { display: grid; gap: 6px; }
.conn__f small { font-size: 12.5px; color: var(--ink-muted); }
.conn__f span { padding: 11px 14px; border-radius: 12px; border: 1px solid var(--line-strong); font-size: 14px; font-family: var(--font-mono); overflow-wrap: anywhere; }
.conn__b { display: flex; justify-content: flex-end; gap: 10px; }
.conn__x, .conn__ok { padding: 8px 16px; border-radius: 10px; font-size: 14px; font-weight: 600; }
.conn__x { background: var(--fill-2); }
.conn__ok { color: #fff; background: var(--claude); }
/* 3.4 · opciones y la vista previa de las reseñas */
.optrow { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.optrow__k { min-width: 74px; font-size: 14px; font-weight: 600; color: var(--ink-soft); }
.revw { display: grid; gap: 14px; padding: 22px; border-radius: 28px; background: var(--card); border: 1px solid var(--line-2); box-shadow: var(--shadow-md); }
:root[data-theme="dark"] .revw { border-color: var(--line); box-shadow: none; }
.revw__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 14px; padding-bottom: 14px; border-bottom: 1px solid var(--line-2); }
.revw__score { display: grid; grid-template-columns: auto auto; column-gap: 12px; align-items: center; }
.revw__score b { grid-row: span 2; font-size: 46px; font-weight: 780; letter-spacing: -0.05em; line-height: 1; }
.revw__score small { font-size: 13px; color: var(--ink-muted); }
.revw__facts { display: flex; gap: 16px; font-size: 13.5px; color: var(--ink-soft); }
.revw__facts b { color: var(--ink); font-size: 16px; }
.stars { color: #f5a524; letter-spacing: 1px; font-size: 15px; white-space: nowrap; }
.stars i { font-style: normal; color: var(--fill); }
.revw__list { list-style: none; margin: 0; padding: 0; display: grid; }
.revw__list li { display: grid; gap: 6px; padding: 12px 0; border-top: 1px solid var(--line-2); }
.revw__list li:first-child { border-top: 0; padding-top: 0; }
.revw__who { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 14px; }
.revw__who .stars { margin-left: auto; font-size: 13px; }
.revw__cc { font-size: 15px; }
.revw__t { margin: 0; font-size: 14.5px; line-height: 1.5; color: var(--ink-2); }
.revw__img { width: 76px; height: 76px; border-radius: 12px; object-fit: cover; }
.revw__none { color: var(--ink-muted); font-size: 14px; }
/* 4.5 · tu primera venta */
.msg { display: grid; gap: 10px; }
.msg__bub { position: relative; padding: 16px 18px 26px; border-radius: 20px 20px 20px 6px; background: #dcf8c6; color: #111b21; box-shadow: var(--shadow-sm); }
:root[data-theme="dark"] .msg__bub { background: #005c4b; color: #e9edef; }
.msg__bub p { margin: 0; font-size: 15.5px; line-height: 1.5; }
.msg__bub .fill { font-weight: 650; }
.msg__bub .miss { opacity: 0.6; text-decoration: underline dashed; }
.msg__meta { position: absolute; right: 12px; bottom: 6px; display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; opacity: 0.6; }
.msg__meta .ic { width: 12px; height: 12px; }
.pvf { list-style: none; margin: 0; padding: 0; display: grid; border-radius: 22px; background: var(--card); border: 1px solid var(--line-2); overflow: hidden; }
.pvf li { display: grid; gap: 6px; padding: 14px 16px; border-top: 1px solid var(--line-2); }
.pvf li:first-child { border-top: 0; }
.pvf__h { display: flex; align-items: center; gap: 8px; }
.pvf__h b { font-size: 14.5px; font-weight: 650; }
.pvf__h small { font-size: 12.5px; color: var(--ink-muted); }
.pvf__h .btn { margin-left: auto; width: 34px; padding: 0; }
.pvf p { margin: 0; font-size: 14px; line-height: 1.5; color: var(--ink-soft); }
.pvf .fill { color: var(--ink); font-weight: 600; }
.pvf .miss { text-decoration: underline dashed; }
#pv-tabs .pill .ic { width: 14px; height: 14px; color: var(--ok); }
/* 5.6 · el flujo de los anuncios y la matriz del test */
.aflow { display: flex; align-items: flex-start; gap: 8px; padding: 18px; border-radius: 22px; background: var(--fill-2); }
.aflow__n { flex: 1 1 0; display: grid; justify-items: center; gap: 6px; text-align: center; }
.aflow__n b { font-size: 14px; font-weight: 650; letter-spacing: -0.015em; }
.aflow__n small { font-size: 12.5px; color: var(--ink-muted); line-height: 1.35; }
.aflow__l { flex: 0 0 28px; height: 2px; margin-top: 20px; border-radius: 2px; background: var(--line-strong); }
.opt--sm { padding: 16px; gap: 4px; }
.opt--sm .opt__t { font-size: 17px; }
.opt--sm .opt__d { font-size: 13.5px; }
.mx { max-width: 620px; margin: 0 auto; display: grid; grid-template-columns: auto repeat(3, minmax(0, 1fr)); gap: 8px; padding: 20px; border-radius: 26px; background: var(--card); border: 1px solid var(--line-2); box-shadow: var(--shadow-md); }
:root[data-theme="dark"] .mx { border-color: var(--line); box-shadow: none; }
.mx__h { font-size: 13px; font-weight: 650; text-align: center; color: var(--ink-soft); align-self: end; }
.mx__r { font-size: 13.5px; font-weight: 650; align-self: center; padding-right: 6px; }
.mx i { aspect-ratio: 4 / 3; border-radius: 12px; background: linear-gradient(160deg, color-mix(in srgb, var(--hc) 22%, var(--card)), color-mix(in srgb, var(--hc) 8%, var(--card))); border: 1px solid color-mix(in srgb, var(--hc) 25%, transparent); position: relative; }
.mx i::after { content: ''; position: absolute; left: 50%; top: 50%; width: 0; height: 0; transform: translate(-35%, -50%); border-style: solid; border-width: 8px 0 8px 13px; border-color: transparent transparent transparent color-mix(in srgb, var(--hc) 70%, transparent); }
/* 5.5o · tu semana */
.cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; padding: 18px; border-radius: 26px; background: var(--card); border: 1px solid var(--line-2); box-shadow: var(--shadow-md); }
:root[data-theme="dark"] .cal { border-color: var(--line); box-shadow: none; }
.cal__d { display: grid; gap: 6px; align-content: start; }
.cal__d > b { text-align: center; font-size: 13px; color: var(--ink-soft); }
.cal__v { display: grid; gap: 4px; justify-items: center; padding: 8px 4px; border-radius: 12px; background: var(--fill-2); }
.cal__v i { font-style: normal; font-size: 11px; color: var(--ink-muted); font-variant-numeric: tabular-nums; }
.cal__r { display: flex; gap: 3px; }
.cal__r svg { width: 14px; height: 14px; }

/* ====== Ajustes por tamaño ====== */
@media (max-width: 1180px) {
  .plat__grid, .pan__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .need__list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .gprods { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 980px) {
  .acc { grid-template-columns: minmax(0, 1fr); gap: 28px; min-height: 0; }
  .acc__side { order: 2; }
  .sk { grid-template-columns: minmax(0, 1fr); }
  .sk__side { position: static; }
  .sk__side .sk__rules, .sk__side .sk__ins { display: none; }
  .pan__hero { grid-template-columns: minmax(0, 1fr); }
  .pan__ring { justify-self: start; }
  .pan__feed, .pr__grid { grid-template-columns: minmax(0, 1fr); }
  .bento--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 680px) {
  .plat__grid, .pan__grid, .pan__grid--3, .need__list, .gprods { grid-template-columns: minmax(0, 1fr); }
  .pop__grid { grid-template-columns: minmax(0, 1fr); }
  .sh { grid-template-columns: auto minmax(0, 1fr); }
  .sh .gi { --s: 46px; }
  .sh__x { grid-column: 1 / -1; margin-top: 12px; }
  .tres__l { display: none; }
  .tres { gap: 16px; }
  .aud__add { grid-template-columns: minmax(0, 1fr); }
  .aud__list li { grid-template-columns: auto minmax(0, 1fr); }
  .aud__st, .aud__mv { grid-column: 2; }
  .rt__bars li { grid-template-columns: 100px minmax(0, 1fr) auto; }
  .adm__prev li { grid-template-columns: 48px minmax(0, 1fr); }
  .adm__prev li .fld__box { grid-column: 1 / -1; }
  .cal { gap: 4px; padding: 12px; }
  .cal__r svg { width: 11px; height: 11px; }
  .aflow { flex-direction: column; align-items: stretch; }
  .aflow__l { display: none; }
  .chat__q, .chat__a { max-width: 100%; }
  .com__reply { grid-template-columns: minmax(0, 1fr) auto; }
  .com__reply .avatar { display: none; }
  .skp__a { grid-template-columns: minmax(0, 1fr) 84px; padding: 14px; }
  .skp__img { width: 84px; height: 84px; }
  .skp__new { display: none; }
  .skd { padding: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .tres__l i { animation: none; }
}

/* 6.4 · tres columnas: carritos, retargeting y el prompt que analiza los anuncios */
.lay--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1100px) { .lay--three { grid-template-columns: repeat(2, minmax(0, 1fr)); } .lay--three > .lay__col { grid-column: 1 / -1; } }
@media (max-width: 760px) { .lay--three { grid-template-columns: minmax(0, 1fr); } }
.rtg { list-style: none; margin: 2px 0 0; padding: 0; display: grid; counter-reset: rtg; }
.rtg > li { position: relative; padding: 7px 0 7px 34px; border-top: 1px solid var(--line-2); counter-increment: rtg; font-size: 14.5px; line-height: 1.4; color: var(--ink-2); }
.rtg > li:first-child { border-top: 0; }
.rtg > li::before { content: counter(rtg); position: absolute; left: 0; top: 7px; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 650; color: var(--hc, var(--ink)); background: color-mix(in srgb, var(--hc, var(--ink)) 12%, transparent); }
.rtg > li b { color: var(--ink); font-weight: 650; }

/* El panel como caja de herramientas: los módulos y la plataforma */
.pan__sec { display: grid; gap: 12px; }
.pan__h { display: flex; align-items: center; gap: 8px; margin: 6px 0 0; font-size: 13px; font-weight: 650; letter-spacing: 0.02em; text-transform: uppercase; color: var(--ink-muted); }
.pan__h .ic { width: 15px; height: 15px; }
.ptile__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.ptile__ring { display: grid; place-items: center; color: var(--ink-muted); }
.ptile__ring .ic { width: 16px; height: 16px; }
.ptile__k { font-size: 12.5px; font-weight: 650; color: var(--hc, var(--ink-muted)); letter-spacing: 0; }
.ptile--mod .ptile__t { margin-top: -4px; }
.ptile--all { width: 100%; font: inherit; text-align: left; cursor: pointer; }
.ptile--mod.is-locked .ptile__k { color: var(--ink-muted); }

/* ===================================================================
   v2 como software (26/10/2026): barra de secciones, y cada sección una página con sus herramientas
   =================================================================== */
/* La barra de secciones, en el centro de la cabecera */
.snav { justify-self: center; display: flex; align-items: center; gap: 2px; min-width: 0; overflow-x: auto; scrollbar-width: none; transition: opacity .4s var(--ease-soft); }
.snav::-webkit-scrollbar { display: none; }
.snav__i { flex: none; display: inline-flex; align-items: center; height: 36px; padding: 0 12px; border-radius: 999px; font-size: 14px; font-weight: 560; letter-spacing: -0.012em; color: var(--ink-soft); text-decoration: none; white-space: nowrap; transition: background .2s, color .2s; }
.snav__i:hover { background: var(--fill-2); color: var(--ink); }
.snav__i.is-on { background: var(--ink); color: var(--bg); }
:root[data-theme="dark"] .snav__i.is-on { background: #fff; color: #111; }
.snav__i.is-locked { opacity: .55; }
@media (max-width: 1180px) { .snav { display: none; } }
/* El menú de las secciones solo hace falta donde no cabe la barra */
@media (min-width: 1181px) { #btn-tools { display: none; } }

/* La página de una sección: su cabecera, sus accesos y sus herramientas en paneles */
body[data-vista="paso"] .vista--paso { display: flex; flex-direction: column; gap: 18px; padding-bottom: 72px; }
.pie { display: none !important; }
.sp { order: -2; display: grid; gap: 16px; }
.sp__t em { font-style: normal; color: var(--hc); }
.sp__hero { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 18px; align-items: center; padding: 2px 0 0; }
.sp__art .gx { --sz: 76px; }
.sp__t { margin: 0; font-size: clamp(28px, 3vw, 40px); font-weight: 760; line-height: 1.04; letter-spacing: -0.045em; }
.sp__d { margin: 6px 0 0; font-size: 16px; line-height: 1.45; color: var(--ink-soft); max-width: 70ch; }
.sp__tips { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
.sp__lock { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 16px; align-items: center; padding: 20px 22px; border-radius: 24px; background: var(--card); border: 1px dashed var(--line); }
.sp__lock b { display: block; font-size: 17px; font-weight: 680; }
.sp__lock p { margin: 4px 0 0; font-size: 14.5px; color: var(--ink-soft); }
.hsheet .paso__head { margin: 0 0 22px; max-width: none; }
.hsheet .paso__ic.gi { --s: 48px; }
.hsheet .paso__t { font-size: clamp(22px, 2.2vw, 28px); letter-spacing: -0.035em; }
.hsheet .paso__d { font-size: 16px; margin-top: 6px; }
.hsheet .paso__row { justify-content: space-between; }
.paso__ctl { margin-left: auto; }
.pctl { display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 14px; border-radius: 999px; font-size: 13.5px; font-weight: 560; color: var(--ink-soft); background: var(--fill-2); max-width: 360px; }
.pctl span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pctl .ic { flex: none; width: 15px; height: 15px; }
.pctl.is-ok { color: var(--ok); background: var(--ok-soft); }
.pctl__ck { height: 38px; padding: 0 16px 0 10px; border-radius: 999px; background: var(--fill-2); cursor: pointer; transition: background .2s; }
.pctl__ck:hover { background: var(--fill); }
.pctl__ck:has(input:checked) { background: var(--ok-soft); color: var(--ok); }
.pctl__ck.is-locked { opacity: .6; cursor: not-allowed; }
.pctl__ck .ck__t { font-size: 14px; font-weight: 600; white-space: nowrap; }
/* Envíos: las dos partes a la vez, sin «siguiente» */
.paso[data-paso="4.2"] .part { display: block !important; }
.paso[data-paso="4.2"] .part + .part { margin-top: 26px; padding-top: 26px; border-top: 1px solid var(--line-2); }
.paso[data-paso="4.2"] .part__go, .paso[data-paso="4.2"] [data-part-of="mercado"] [data-part="envio"] { display: none !important; }
/* El onboarding de los tres registros (lo primero que ves sin ellos) */
body[data-onb="1"] .snav, body[data-onb="1"] #btn-nivel { display: none !important; }
.ob { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px; align-items: center; padding: 6px 0 0; }
.ob .kicker { margin: 0 0 6px; }
.ob__ring { position: relative; display: grid; place-items: center; }
.ob__ring > span { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.ob__ring b { font-size: 24px; font-weight: 760; letter-spacing: -0.04em; }
.ob__ring small { font-size: 12px; color: var(--ink-muted); }
.ob__regs { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.ob__regs li > a, .ob__regs li > div { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center; height: 100%; padding: 16px 18px; border-radius: 22px; background: var(--card); border: 1px solid var(--line-2); box-shadow: var(--shadow-sm); color: var(--ink); text-decoration: none; transition: transform .45s var(--ease-spring), box-shadow .35s; }
.ob__regs li > a:hover { transform: translate3d(0, -2px, 0); box-shadow: var(--shadow-md); }
.ob__regs li.is-ok > a, .ob__regs li.is-ok > div { background: color-mix(in srgb, var(--ok) 6%, var(--card)); border-color: color-mix(in srgb, var(--ok) 30%, var(--line-2)); }
.ob__ic .gi, .ob__ic .logo-tile { --s: 42px; }
.ob__t b { display: block; font-size: 16px; font-weight: 680; letter-spacing: -0.02em; }
.ob__t small { display: block; font-size: 13px; color: var(--ink-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ob__regs .st { width: 28px; height: 28px; }
.ob__regs li:not(.is-ok) .st { color: var(--ink-muted); background: var(--fill-2); }
.ob__g { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 14px; align-items: center; margin-top: 14px; padding: 4px 4px 0; }
.ob__g .logo-tile { --s: 44px; }
.ob__gt { margin: 0; font-size: 22px; font-weight: 740; letter-spacing: -0.035em; }
.ob__g p { margin: 2px 0 0; font-size: 15px; color: var(--ink-soft); }
@media (max-width: 860px) {
  .ob { grid-template-columns: minmax(0, 1fr); }
  .ob__ring { justify-self: start; }
  .ob__regs { grid-template-columns: minmax(0, 1fr); }
  .ob__g { grid-template-columns: auto minmax(0, 1fr); }
  .ob__g .ob__st { grid-column: 1 / -1; }
}
/* Portada: lo que trae cada sección */
.ph__st { flex-wrap: wrap; }
.ph__tool { display: inline-flex; align-items: center; height: 24px; padding: 0 9px; border-radius: 999px; font-size: 12px; font-weight: 560; color: var(--ink-soft); background: var(--fill-2); }
@media (max-width: 860px) {
  .sp__hero { grid-template-columns: auto minmax(0, 1fr); }
  .sp__tips { grid-column: 1 / -1; justify-content: flex-start; }
  .sp__art .gx { --sz: 76px; }
  .hsheet .paso__row { flex-direction: column; align-items: flex-start; }
  .paso__ctl { margin-left: 0; }
  .pctl { max-width: 100%; }
  .sp__lock { grid-template-columns: minmax(0, 1fr); }
}

/* ===================================================================
   La caja de herramientas: cada apartado enseña sus herramientas a la vista, listas para usar
   =================================================================== */
.sdash { order: -1; display: grid; gap: 18px; }
.sres { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
.sres__i { display: grid; gap: 2px; padding: 12px 16px; border-radius: 20px; background: var(--card); border: 1px solid var(--line-2); box-shadow: var(--shadow-sm); color: var(--ink); text-decoration: none; transition: transform .45s var(--ease-spring), box-shadow .35s; }
.sres__i:hover { transform: translate3d(0, -2px, 0); box-shadow: var(--shadow-md); }
.sres__k { display: flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 600; color: var(--ink-muted); }
.sres__k .ic { width: 15px; height: 15px; color: var(--hc, var(--ink-muted)); }
.sres__v { font-size: 20px; font-weight: 740; letter-spacing: -0.035em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sres__i small { font-size: 13px; color: var(--ink-soft); }
/* El espacio de trabajo: a la izquierda las herramientas del apartado (pestañas con lo tuyo de cada una), a la derecha
   la que tienes abierta */
.ws { display: grid; grid-template-columns: 272px minmax(0, 1fr); gap: 18px; align-items: start; }
.ws__rail { position: sticky; top: calc(var(--top-h, 64px) + 18px); display: grid; gap: 10px; min-width: 0; }
.ws__tabs, .ws__mas { display: grid; gap: 2px; padding: 6px; border-radius: 24px; background: var(--card); border: 1px solid var(--line-2); box-shadow: var(--shadow-sm); }
.ws__mas { background: transparent; border-style: dashed; box-shadow: none; }
:root[data-theme="dark"] .ws__tabs { border-color: var(--line); box-shadow: none; }
.ws__tab { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 11px; align-items: center; min-height: 54px; padding: 8px 10px; border-radius: 18px; color: var(--ink); text-decoration: none; transition: background .2s, box-shadow .2s; }
.ws__tab:hover { background: var(--fill-2); }
.ws__tab.is-on { background: color-mix(in srgb, var(--hc) 9%, var(--card)); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--hc) 34%, transparent); }
.ws__tab .gi, .ws__tab .logo-tile { --s: 34px; }
.ws__tt { display: grid; min-width: 0; }
.ws__tt b { font-size: 14.5px; font-weight: 650; letter-spacing: -0.015em; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ws__st { display: flex; align-items: center; gap: 5px; font-size: 12.5px; line-height: 1.35; color: var(--ink-muted); overflow: hidden; white-space: nowrap; }
.ws__st::before { content: ''; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--line-strong); }
.ws__st.is-ok { color: var(--ok); }
.ws__st.is-ok::before { background: var(--ok); }
.ws__st.is-warn::before { background: var(--warn); }
.ws__st.is-bad { color: var(--danger-text); }
.ws__st.is-bad::before { background: var(--danger); }
.ws__mas .ws__st::before { display: none; }
.ws__tab--x > .ic { width: 16px; height: 16px; color: var(--ink-muted); }
.ws__main { min-width: 0; }
.ws__main > .tool { animation: wsIn .4s var(--ease-out-quint); }
@keyframes wsIn { from { opacity: 0; transform: translate3d(0, 8px, 0); } }
/* El onboarding: tus registros hacen de pestañas */
body[data-onb="1"] .ws { grid-template-columns: minmax(0, 1fr); }
body[data-onb="1"] .ws__rail { display: none; }
.ob__regs a.is-on { box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--hc) 40%, transparent), var(--shadow-sm); background: color-mix(in srgb, var(--hc) 6%, var(--card)); }
.tool { display: grid; gap: 18px; align-content: start; min-width: 0; padding: 24px 26px 26px; border-radius: 28px; background: var(--card); border: 1px solid var(--line-2); box-shadow: var(--shadow-sm); }
:root[data-theme="dark"] .tool { border-color: var(--line); box-shadow: none; }
.tool__h { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 14px; align-items: center; }
.tool__h .gi, .tool__h .logo-tile { --s: 44px; }
.tool__t { margin: 0; font-size: 21px; font-weight: 740; letter-spacing: -0.03em; line-height: 1.2; }
.tool__d { margin: 3px 0 0; font-size: 14.5px; line-height: 1.45; color: var(--ink-soft); }
.tool__b { display: grid; gap: 14px; min-width: 0; }
.tool__k { margin: 6px 0 -4px; font-size: 13px; font-weight: 650; letter-spacing: 0.01em; text-transform: uppercase; color: var(--ink-muted); }
.tool__note { margin: 0; font-size: 14px; line-height: 1.5; color: var(--ink-soft); }
.tool__note b { color: var(--ink); }
.tool__links { display: flex; flex-wrap: wrap; gap: 8px; }
.tool__links .btn--block { width: auto; }
.tool__grp { display: grid; gap: 12px; padding: 16px; border-radius: 20px; background: var(--fill-2); }
.tool__sub[hidden] { display: none; }
.tool__sub { display: grid; gap: 10px; }
/* Dentro de una herramienta no hay pasos: fuera los números, los «ve a la otra pantalla» y los finales de curso */
.tool .block__n, .tool [data-key-go], .tool [data-stock-end], .tool .vis, .tool .demo, .tool .slides { display: none !important; }
.tool .block__k { margin-bottom: 0; }
.tool .lay { gap: 18px; }
.tool .lay--center { max-width: none; }
.tool .card { box-shadow: none; }
/* Las herramientas con prompt: a la izquierda lo que eliges, a la derecha tu prompt (se queda a la vista) */
.tool__b--dos { grid-template-columns: minmax(0, 1fr) minmax(300px, 0.92fr); gap: 20px; align-items: start; }
.tool__cfg { display: grid; gap: 14px; min-width: 0; align-content: start; }
.tool__out { position: sticky; top: calc(var(--top-h, 64px) + 18px); min-width: 0; }
.tool__b:has(#forge-form[hidden]) > .tool__out { display: none; }
.tool__b:has(#forge-form[hidden]) { grid-template-columns: minmax(0, 1fr); }
/* Las partes de una herramienta, en pestañas pequeñas */
.seg { display: grid; gap: 16px; min-width: 0; }
.seg__bar { display: flex; gap: 4px; padding: 4px; border-radius: 999px; background: var(--fill-2); overflow-x: auto; scrollbar-width: none; justify-self: start; max-width: 100%; }
.seg__bar::-webkit-scrollbar { display: none; }
.seg__b { flex: none; height: 36px; padding: 0 16px; border: 0; border-radius: 999px; background: transparent; font: inherit; font-size: 14px; font-weight: 600; color: var(--ink-soft); cursor: pointer; transition: background .2s, color .2s, box-shadow .2s; }
.seg__b:hover { color: var(--ink); }
.seg__b[aria-selected="true"] { background: var(--card); color: var(--ink); box-shadow: var(--shadow-sm); }
:root[data-theme="dark"] .seg__b[aria-selected="true"] { background: rgba(255, 255, 255, 0.1); }
.seg__p { display: grid; gap: 14px; min-width: 0; }
.seg__p[hidden] { display: none; }
/* El prompt, compacto: lo que lleva dentro y el texto plegado */
.prompt--c { display: grid; grid-template-columns: minmax(0, 1fr); background: var(--card); }
:root[data-theme="dark"] .prompt--c { background: rgba(255, 255, 255, 0.025); }
.pc__h { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 14px 16px 0; }
.pc__t { flex: none; display: inline-flex; align-items: center; gap: 7px; margin: 0 auto 0 0; font-size: 13px; font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase; color: var(--hc); }
.pc__t .ic { width: 16px; height: 16px; }
.pc__h .chip { display: block; min-width: 0; height: 24px; line-height: 24px; font-size: 12px; overflow: hidden; text-overflow: ellipsis; }
.pc__ing { list-style: none; margin: 0; padding: 12px 16px 4px; display: grid; gap: 6px; }
.pc__ing:empty { display: none; }
.pc__ing li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 9px; align-items: center; }
.pc__ing li > .ic { width: 16px; height: 16px; color: var(--ok); }
.pc__ing li.is-miss > .ic { color: var(--warn); }
.pc__ing span { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.pc__ing small { flex: none; font-size: 12.5px; color: var(--ink-muted); }
.pc__ing b { min-width: 0; font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pc__ing li.is-miss b { color: var(--ink-muted); font-weight: 500; }
.prompt--c .prompt__text { position: relative; margin: 10px 12px 12px; padding: 12px 14px; border-radius: 16px; background: var(--code); font-size: 13px; line-height: 1.65; max-height: calc(4.95em + 24px); overflow: hidden; -webkit-mask-image: linear-gradient(#000 calc(100% - 2.4em), transparent calc(100% - 4px)); mask-image: linear-gradient(#000 calc(100% - 2.4em), transparent calc(100% - 4px)); cursor: pointer; }
.prompt--c.is-open .prompt__text { max-height: 380px; overflow-y: auto; -webkit-mask-image: none; mask-image: none; cursor: auto; }
/* Hasta tres líneas: se ve entero, sin fundido ni «Ver el prompt» */
.prompt--c.is-corto .prompt__text { max-height: none; -webkit-mask-image: none; mask-image: none; cursor: auto; }
.prompt--c.is-corto .pc__ver { display: none; }
.prompt--c .prompt__bar { border-top: 1px solid var(--line-2); }
.pc__ver { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; }
.pc__ver .ic { width: 16px; height: 16px; transition: transform .3s var(--ease-out-quint); }
.prompt--c.is-open .pc__ver .ic { transform: rotate(180deg); }
.tool .prompt--sm .prompt__text { max-height: calc(4.95em + 24px); }
.tool .prompt--sm.is-open .prompt__text { max-height: 380px; }
@media (max-width: 1060px) {
  .tool__b--dos { grid-template-columns: minmax(0, 1fr); }
  .tool__out { position: static; }
}
@media (max-width: 980px) {
  .ws { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .ws__rail { position: sticky; top: calc(var(--top-h, 64px) + 6px); z-index: 5; display: flex; gap: 6px; margin: 0 calc(var(--gut, 16px) * -1); padding: 8px var(--gut, 16px); overflow-x: auto; scrollbar-width: none; background: color-mix(in srgb, var(--bg) 88%, transparent); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
  .ws__rail::-webkit-scrollbar { display: none; }
  .ws__tabs, .ws__mas { display: contents; }
  .ws__tab { flex: none; grid-template-columns: auto auto; min-height: 0; padding: 5px 14px 5px 5px; border-radius: 999px; background: var(--card); box-shadow: inset 0 0 0 1px var(--line-2); }
  .ws__tab--x { grid-template-columns: auto auto auto; background: transparent; box-shadow: inset 0 0 0 1px var(--line); }
  .ws__tab .gi, .ws__tab .logo-tile { --s: 28px; }
  .ws__tt b { font-size: 14px; }
  .ws__st { display: none; }
  .tool { padding: 18px 16px 20px; border-radius: 24px; }
  .tool__h { grid-template-columns: auto minmax(0, 1fr); }
  .tool__st { grid-column: 1 / -1; }
  .sres { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
}
@media (max-width: 680px) {
  .sres__i { padding: 10px 12px; border-radius: 16px; }
  .sres__v { font-size: 17px; }
  .sres__i small { display: none; }
  .sp__d { font-size: 15px; }
  .prompt--c .prompt__bar { padding-left: 12px; }
}

/* Tu tienda de Shopify, con la marca de la web de Shopify: casi negro con verde muy oscuro, verde menta de acento,
   títulos finos y botones de píldora (el blanco y el de borde). Igual en claro y en oscuro */
.logo-tile--shopify > svg { width: 56%; height: 64%; }
.tool--shopify {
  --sh-mint: #36f4a4; --sh-soft: #a1a1aa; --hc: var(--sh-mint);
  position: relative; isolation: isolate; overflow: hidden; color: #fff; border-color: rgba(255, 255, 255, 0.08);
  background: radial-gradient(90% 120% at 100% 0%, rgba(54, 244, 164, 0.14), transparent 55%),
    radial-gradient(70% 90% at 0% 100%, rgba(16, 70, 56, 0.55), transparent 65%), linear-gradient(160deg, #061a1c 0%, #02090a 70%);
  box-shadow: 0 28px 60px -32px rgba(2, 9, 10, 0.7);
}
:root[data-theme="dark"] .tool--shopify { border-color: rgba(255, 255, 255, 0.1); }
.tool--shopify .logo-tile { background: #fff; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12), 0 10px 26px -12px rgba(54, 244, 164, 0.55); }
.tool--shopify .tool__t { color: #fff; font-weight: 560; letter-spacing: -0.04em; }
.tool--shopify .tool__d, .tool--shopify .fld__l, .tool--shopify .fld__help, .tool--shopify .verify__msg, .tool--shopify .verify[data-st="wait"] .verify__msg { color: var(--sh-soft); }
.tool--shopify .verify .fld__help b { color: #fff; }
.tool--shopify .info { color: var(--sh-soft); }
.tool--shopify .link { color: var(--sh-mint); }
/* Los dos botones de Shopify: el blanco («Crear mi cuenta») y el de borde («Ver los planes») */
.tool--shopify .tool__links .btn { height: 48px; padding: 0 22px; font-weight: 600; }
.tool--shopify .tool__links .btn:first-child { background: #fff; color: #000; box-shadow: none; }
.tool--shopify .tool__links .btn:first-child:hover { background: #e4e4e7; }
.tool--shopify .tool__links .btn + .btn { background: transparent; color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.75); }
.tool--shopify .tool__links .btn + .btn:hover { background: rgba(255, 255, 255, 0.08); }
/* La dirección de tu tienda: campo oscuro y «Verificar» en verde menta */
.tool--shopify .fld__box { background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.12); }
.tool--shopify .fld__box:hover { background: rgba(255, 255, 255, 0.09); }
.tool--shopify .fld__box:focus-within, .tool--shopify .verify[data-st] .fld__box { background: rgba(255, 255, 255, 0.07); }
.tool--shopify .fld__box:focus-within { border-color: var(--sh-mint); box-shadow: 0 0 0 4px rgba(54, 244, 164, 0.18); }
.tool--shopify .fld__box input { color: #fff; }
.tool--shopify .fld__box input::placeholder { color: #71717a; }
.tool--shopify .fld__ico { color: var(--sh-soft); }
.tool--shopify .verify .btn--primary { background: var(--sh-mint); color: #02090a; box-shadow: 0 10px 26px -12px rgba(54, 244, 164, 0.75); }
.tool--shopify .verify .btn--primary:hover { background: #5cf7b7; }
.tool--shopify .verify[data-st="ok"] .verify__msg { color: var(--sh-mint); }
.tool--shopify .verify[data-st="ok"] .fld__box { border-color: rgba(54, 244, 164, 0.55); }
.tool--shopify .verify[data-st="bad"] .verify__msg { color: #ff8a80; }
.tool--shopify .verify__manual { background: rgba(255, 255, 255, 0.06); color: #d4d4d8; }
.tool--shopify .verify__manual .btn--ghost { background: rgba(255, 255, 255, 0.1); color: #fff; }
.tool--shopify .pctl { background: rgba(255, 255, 255, 0.08); color: #d4d4d8; }
.tool--shopify .pctl.is-ok { background: rgba(54, 244, 164, 0.12); color: var(--sh-mint); }
.tool--shopify .btn:focus-visible { outline-color: rgba(54, 244, 164, 0.6); }

/* Tu proveedor, con la marca de la web de AutoDS: crema cálido con sus trazos de colores, azul marino, Rubik en negrita,
   el rosa de «Get started» y el azul de sus botones, con esquinas de 8 px. Igual en claro y en oscuro */
.tool--autods {
  --ds-ink: #191935; --ds-navy: #090e35; --ds-soft: #4c5159; --ds-mute: #75757c; --ds-pink: #ff0061; --ds-blue: #0b56cf; --ds-line: #e8dccd;
  --hc: var(--ds-pink);
  position: relative; isolation: isolate; overflow: hidden; color: var(--ds-ink); border-color: var(--ds-line);
  background: linear-gradient(170deg, #fcf8f3 0%, #fcf4ee 100%); box-shadow: 0 24px 50px -34px rgba(9, 14, 53, 0.35);
}
:root[data-theme="dark"] .tool--autods { border-color: transparent; box-shadow: 0 24px 50px -30px rgba(0, 0, 0, 0.6); }
/* Los trazos de colores de su portada, en la esquina de abajo */
.tool--autods::before, .tool--autods::after { content: ''; position: absolute; z-index: -1; width: 22px; height: 6px; border-radius: 3px; pointer-events: none; }
.tool--autods::before { bottom: 26px; right: 44px; background: var(--ds-pink); transform: rotate(-24deg); box-shadow: -48px 14px 0 #0b56cf, -104px -6px 0 #f5a524; }
.tool--autods::after { bottom: 46px; right: 150px; background: #3fc27a; transform: rotate(18deg); }
.tool--autods .logo-tile { background: #fff; box-shadow: 0 0 0 1px var(--ds-line), 0 10px 24px -14px rgba(255, 0, 97, 0.6); }
.tool--autods .logo-tile > svg { width: 74%; height: 74%; }
.tool__marca { display: block; width: auto; height: 26px; margin: 0 0 6px; }
.tool--autods .tool__t { font-family: 'Rubik', var(--font-sans); font-weight: 700; letter-spacing: -0.02em; color: var(--ds-ink); }
.tool--autods .tool__d, .tool--autods .tool__note, .tool--autods .vprov__st, .tool--autods .fld__l { color: var(--ds-soft); }
.tool--autods .tool__note b, .tool--autods .block__k { color: var(--ds-ink); }
.tool--autods .block__k { font-family: 'Rubik', var(--font-sans); font-weight: 500; }
.tool--autods .block__k small, .tool--autods .file__meta { color: var(--ds-mute); }
.tool--autods .info, .tool--autods .term { color: inherit; }
/* Botones: el rosa de «Get started» para crear la cuenta y copiar, el azul para descargar; esquinas de 8 px */
.tool--autods .btn { border-radius: 8px; font-family: 'Rubik', var(--font-sans); font-weight: 500; letter-spacing: 0; }
.tool--autods .btn--primary { background: var(--ds-pink); color: #fff; box-shadow: 0 10px 22px -14px rgba(255, 0, 97, 0.9); }
.tool--autods .btn--primary:hover { background: #e60057; box-shadow: 0 14px 28px -14px rgba(255, 0, 97, 0.9); }
.tool--autods .tool__links .btn { height: 48px; padding: 0 24px; font-size: 16px; text-transform: none; }
.tool--autods .file .btn--primary { background: var(--ds-blue); box-shadow: 0 10px 22px -14px rgba(11, 86, 207, 0.9); }
.tool--autods .file .btn--primary:hover { background: #0a4bb5; }
.tool--autods .btn:focus-visible { outline-color: rgba(255, 0, 97, 0.45); }
/* Tarjetas blancas con su borde, como sus campos */
.tool--autods .card, .tool--autods .prompt--c { background: #fff; border: 1px solid #e3e3e3; border-radius: 12px; }
.tool--autods .file__ic { background: var(--ds-navy); color: #fff; }
.tool--autods .file__name { font-family: 'Rubik', var(--font-sans); font-weight: 500; color: var(--ds-ink); }
.tool--autods .pc__t { color: var(--ds-pink); font-family: 'Rubik', var(--font-sans); }
.tool--autods .pc__h .chip { background: #f4efe9; color: var(--ds-soft); }
.tool--autods .prompt--c .prompt__text { background: #f7f5f2; color: var(--ds-ink); }
.tool--autods .prompt__text .fill { color: var(--ds-blue); background: rgba(11, 86, 207, 0.09); }
.tool--autods .pc__ing b { color: var(--ds-ink); }
.tool--autods .prompt--c .prompt__bar { background: #fff; border-color: #ececec; }
.tool--autods .link, .tool--autods .vprov__b summary { color: var(--ds-blue); }
.tool--autods .fld__box { background: #fff; border: 1px solid #d3d3d3; border-radius: 6px; }
.tool--autods .fld__box:focus-within { border-color: var(--ds-blue); box-shadow: 0 0 0 4px rgba(11, 86, 207, 0.14); }
.tool--autods .fld__box input { color: var(--ds-ink); }
.tool--autods .fld__ico { color: var(--ds-mute); }
.tool--autods .pctl { background: #fff; color: var(--ds-soft); box-shadow: inset 0 0 0 1px var(--ds-line); }
.tool--autods .pctl.is-ok, .tool--autods .vprov__st .ic { color: #1f8a4c; }
.tool--autods .pctl.is-ok { background: #e6f8e1; box-shadow: none; }
@media (max-width: 680px) { .tool--autods::before, .tool--autods::after { display: none; } }

/* ===================================================================
   El panel sin repeticiones (26/10/2026): las secciones salen una vez (la barra de arriba; en pantallas estrechas,
   su menú), el inicio tiene una tarjeta por cada una con una maqueta de lo que hay dentro, y el nivel es tu lista de
   tareas: su anillo con el número, igual en la cabecera, en el panel y en el cajón
   =================================================================== */
.lvr { --hc: var(--brand); position: relative; display: inline-grid; place-items: center; width: var(--sz); height: var(--sz); flex: none; }
.lvr > .ring { position: absolute; inset: 0; width: 100%; height: 100%; }
.lvr > b { position: relative; font-size: calc(var(--sz) * 0.4); font-weight: 760; line-height: 1; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }

/* En la cabecera: abre tus tareas */
.top__lvl { display: inline-flex; align-items: center; gap: 9px; height: 42px; padding: 0 14px 0 5px; border: 0; border-radius: 999px; background: var(--fill-2); color: var(--ink); font: inherit; cursor: pointer; transition: background .2s, transform .45s var(--ease-spring); }
.top__lvl:empty { display: none; }
.top__lvl:hover { background: var(--fill); }
.top__lvl:active { transform: scale(0.97); }
.top__lvl:focus-visible { outline: 3px solid rgba(var(--brand-rgb), 0.45); outline-offset: 2px; }
.top__lvt { display: grid; text-align: left; line-height: 1.15; }
.top__lvt b { font-size: 13.5px; font-weight: 680; letter-spacing: -0.02em; }
.top__lvt small { font-size: 11.5px; color: var(--ink-muted); font-variant-numeric: tabular-nums; }

/* Una tarea: su casilla (se marca sola), qué es y qué te da */
.dtask { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 9px 10px; border-radius: 14px; color: var(--ink); text-decoration: none; transition: background .2s; }
.dtask:hover, .dtask:focus-visible { background: var(--fill-2); outline: none; }
.dtask .st { width: 24px; height: 24px; }
.dtask .st .ic { width: 13px; height: 13px; }
.dtask__t { display: grid; min-width: 0; }
.dtask__t b { font-size: 14.5px; font-weight: 620; letter-spacing: -0.015em; }
.dtask__t small { font-size: 12.5px; color: var(--ink-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dtask > .ic { width: 15px; height: 15px; color: var(--ink-muted); transition: transform .35s var(--ease-spring), color .2s; }
.dtask:hover > .ic { transform: translateX(2px); color: var(--ink); }
.dtask.is-done .dtask__t b { color: var(--ink-muted); text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--ink-muted) 55%, transparent); }

/* El cajón de tu nivel */
.lvd { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 16px; align-items: center; margin: 0 10px 6px; padding: 14px 16px; border-radius: 20px; background: var(--fill-2); }
.lvd p { margin: 0; }
.lvd p b { display: block; font-size: 17px; font-weight: 680; letter-spacing: -0.02em; }
.lvd p small { display: block; margin-top: 2px; font-size: 13.5px; line-height: 1.4; color: var(--ink-soft); }
a.dfase__h { color: var(--ink); text-decoration: none; }
.dfase .dtask { padding-left: 14px; }
.dlog { display: grid; gap: 12px; padding: 14px 10px 6px; }
.dlog__h { margin: 0; display: flex; align-items: center; gap: 8px; font-size: 15.5px; font-weight: 680; letter-spacing: -0.025em; }
.dlog__h .ic { width: 18px; height: 18px; color: var(--ink-soft); }
.drawer:not([hidden]) .lvd { animation: liIn .5s var(--ease-out-quint) both; }

/* En el panel: tu nivel y tus próximas tareas, a la derecha del saludo */
.pan__hero { grid-template-columns: minmax(0, 1fr) minmax(330px, 410px); }
.lvl { display: grid; padding: 14px; border-radius: 26px; }
.lvl__top { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 16px; align-items: center; margin: 0 0 6px; padding: 8px; border: 0; border-radius: 18px; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; transition: background .2s; }
.lvl__top:hover { background: var(--fill-2); }
.lvl__tt { display: grid; gap: 3px; min-width: 0; }
.lvl__tt > small { font-size: 12.5px; color: var(--ink-muted); }
.lvl__tt > small:first-child { font-weight: 650; color: var(--ink-soft); }
.lvl__tt > b { font-size: 21px; font-weight: 730; letter-spacing: -0.035em; }
.lvl__bar { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 3px; margin: 5px 0 3px; }
.lvl__bar i { height: 6px; border-radius: 999px; background: var(--fill); }
.lvl__bar i.is-on { background: var(--brand); }
.lvl__list { display: grid; padding-top: 6px; border-top: 1px solid var(--line-2); }
.lvl__fin { display: flex; align-items: center; gap: 8px; margin: 0; padding: 12px 10px; border-top: 1px solid var(--line-2); font-size: 14.5px; color: var(--ink-soft); }
.lvl__fin .ic { color: var(--ok); }
.lvl__all { display: flex; align-items: center; justify-content: center; gap: 6px; height: 40px; margin-top: 6px; border: 0; border-radius: 14px; background: var(--fill-2); color: var(--ink); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; transition: background .2s; }
.lvl__all:hover { background: var(--fill); }
.lvl__all .ic { width: 15px; height: 15px; }

/* Una tarjeta por sección, en el orden de la barra: maqueta arriba, qué es y qué herramientas tiene debajo */
.mods { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; }
.mods > .mod { grid-column: span 2; }
.mods > .mod--productos, .mods > .mod--tienda { grid-column: span 4; }
.mod[data-f="ai"] { --h1: #f8b49b; --h2: #d9643f; --hc: #c4502b; }
.mod__a { height: 100%; display: grid; grid-template-rows: auto 1fr; overflow: hidden; border-radius: 26px; background: var(--card); border: 1px solid var(--line-2); box-shadow: var(--shadow-sm); color: var(--ink); text-decoration: none; transition: transform .45s var(--ease-spring), box-shadow .35s var(--ease-soft), border-color .3s; }
:root[data-theme="dark"] .mod__a { border-color: var(--line); box-shadow: none; }
.mod__a:hover { transform: translate3d(0, -3px, 0); box-shadow: var(--shadow-md); border-color: color-mix(in srgb, var(--h2) 40%, var(--line-2)); }
.mod__vis { position: relative; display: block; height: 196px; overflow: hidden; container-type: inline-size; border-bottom: 1px solid var(--line-2); background: radial-gradient(110% 90% at 0% 0%, color-mix(in srgb, var(--h1) 32%, transparent), transparent 62%), color-mix(in srgb, var(--h2) 7%, var(--card)); }
:root[data-theme="dark"] .mod__vis { border-color: var(--line); background: radial-gradient(110% 90% at 0% 0%, color-mix(in srgb, var(--h2) 26%, transparent), transparent 62%), color-mix(in srgb, var(--h2) 8%, var(--card)); }
.mod__b { display: grid; align-content: start; gap: 8px; padding: 18px 20px 20px; }
.mod__h { display: flex; align-items: center; gap: 12px; }
.mod__h .gi { --s: 36px; }
.mod__t { font-size: 18px; font-weight: 700; letter-spacing: -0.03em; }
.mod__go { display: grid; place-items: center; width: 32px; height: 32px; margin-left: auto; border-radius: 50%; background: var(--fill-2); color: var(--ink-soft); transition: transform .4s var(--ease-spring), background .2s, color .2s; }
.mod__go .ic { width: 15px; height: 15px; }
.mod__a:hover .mod__go { background: var(--h2); color: #fff; transform: translateX(2px); }
.mod__d { font-size: 14.5px; line-height: 1.45; color: var(--ink-soft); }
.mod__tools { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }
.mod__tools i { padding: 4px 10px; border-radius: 999px; font-size: 12.5px; font-style: normal; font-weight: 560; color: var(--hc); background: color-mix(in srgb, var(--h2) 10%, transparent); }
.mod__tools .mod__mas { color: var(--ink-muted); background: var(--fill-2); }
.mod__a.is-locked { background: transparent; border-style: dashed; box-shadow: none; }
.mod__a.is-locked .mod__vis { filter: grayscale(1); opacity: .45; }
.mod__a.is-locked .mod__go { background: none; }

/* Las maquetas: piezas de la interfaz de verdad, en pequeño */
.mq { position: absolute; inset: 0; display: block; padding: 18px; }
.mq__tt { display: grid; min-width: 0; }
.mq__tt b { font-size: 13.5px; font-weight: 650; letter-spacing: -0.015em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mq__tt small { font-size: 12px; color: var(--ink-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mq__tt em { font-style: normal; font-weight: 650; color: var(--ok); }
.mq__k { display: flex; align-items: center; gap: 7px; min-width: 0; font-size: 13px; color: var(--ink-soft); }
.mq__k .ic { width: 15px; height: 15px; color: var(--hc); }
.mq__k b { font-weight: 650; color: var(--ink); }
.mq__k small { margin-left: auto; font-size: 12px; color: var(--ink-muted); white-space: nowrap; }
.mq__reg, .mq__prod, .mq__post, .mq__sk, .mq__tile, .mq__chart { background: var(--card); border: 1px solid var(--line-2); box-shadow: var(--shadow-sm); }
:root[data-theme="dark"] :is(.mq__reg, .mq__prod, .mq__post, .mq__sk, .mq__tile, .mq__chart) { border-color: var(--line); box-shadow: none; }
/* Tus cuentas: tus tres registros */
.mq--regs { display: grid; align-content: center; gap: 8px; }
.mq__reg { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 8px 12px 8px 8px; border-radius: 16px; }
.mq__reg .gi, .mq__reg .logo-tile { --s: 32px; }
.mq__reg .st { width: 22px; height: 22px; }
.mq__reg .st .ic { width: 12px; height: 12px; }
/* Productos: los ganadores de la semana */
.mq--prods { display: grid; grid-template-rows: auto minmax(0, 1fr); gap: 10px; }
.mq__prods { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; min-height: 0; }
.mq__prod { display: grid; grid-template-rows: minmax(0, 1fr) auto auto; min-width: 0; min-height: 0; padding: 6px 6px 8px; border-radius: 16px; }
.mq__prod img, .mq__ph { display: block; width: 100%; height: 100%; min-height: 0; margin-bottom: 5px; border-radius: 11px; object-fit: cover; background: var(--fill-2); }
.mq__prod b { padding: 0 3px; font-size: 12.5px; font-weight: 640; letter-spacing: -0.01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mq__prod small { padding: 0 3px; font-size: 11.5px; color: var(--ink-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mq__prod em { font-style: normal; font-weight: 620; color: var(--ok); }
@container (max-width: 520px) { .mq__prods { grid-template-columns: repeat(3, minmax(0, 1fr)); } .mq__prod:nth-child(n + 4) { display: none; } }
/* Tienda: la tuya, hecha por la skill */
.mq__win { position: absolute; top: 20px; right: 26px; bottom: -14px; left: 26px; display: grid; grid-template-rows: auto minmax(0, 1fr); overflow: hidden; border-radius: 14px 14px 0 0; background: #0b0b0c; box-shadow: 0 20px 40px -20px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(0, 0, 0, 0.08); }
.mq__bar { display: flex; align-items: center; gap: 5px; height: 26px; padding: 0 10px; background: #1c1c1f; }
.mq__bar > i { width: 7px; height: 7px; border-radius: 50%; background: #3a3a3f; }
.mq__bar > span { display: inline-flex; align-items: center; gap: 4px; margin: 0 auto; padding: 2px 10px; border-radius: 6px; background: #2a2a2e; font-size: 10.5px; color: #a1a1a8; white-space: nowrap; }
.mq__bar .ic { width: 10px; height: 10px; }
.mq__store { position: relative; isolation: isolate; display: grid; align-content: center; justify-items: start; gap: 4px; padding: 6px 22px 0; }
.mq__store::before { content: ''; position: absolute; z-index: -2; top: 0; right: 0; bottom: 0; width: 58%; background: url(../assets/tienda-fondo.jpg) 50% 62% / cover no-repeat; }
.mq__store::after { content: ''; position: absolute; z-index: -1; inset: 0; background: linear-gradient(90deg, #0b0b0c 40%, rgba(11, 11, 12, 0.5) 58%, rgba(11, 11, 12, 0) 80%); }
.mq__logo { position: absolute; top: 10px; left: 22px; font-size: 13px; font-weight: 800; font-style: italic; color: #ffcc1a; }
.mq__hk { font-size: 9.5px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: #ffcc1a; }
.mq__h { font-size: 30px; font-weight: 900; line-height: 0.92; letter-spacing: -0.03em; text-transform: uppercase; color: #fff; }
.mq__btn { margin-top: 8px; padding: 6px 12px; border-radius: 999px; background: #ffcc1a; color: #111; font-size: 11px; font-weight: 750; }
.mq__chip { position: absolute; z-index: 2; display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px 6px 8px; border-radius: 999px; font-size: 12px; font-weight: 620; color: var(--ink); background: var(--glass-strong); border: 1px solid var(--glass-rim); box-shadow: var(--shadow-md); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); white-space: nowrap; }
.mq__chip .ic { width: 14px; height: 14px; color: var(--hc); }
.mq__chip--a { top: 44px; right: 14px; }
.mq__chip--b { top: 88px; right: 40px; }
.mq__chip--c { top: 132px; right: 18px; }
.mq__stars { font-size: 11px; letter-spacing: -1px; color: #f5b301; }
@container (max-width: 480px) {
  .mq__chip { padding: 5px 9px 5px 7px; font-size: 11px; }
  .mq__chip--a { top: 50px; right: 10px; }
  .mq__chip--b { display: none; }
  .mq__chip--c { top: 96px; right: 10px; }
  .mq__h { font-size: 25px; }
}
/* Marketing: los anuncios, como en Instagram */
.mq--ads { display: flex; align-items: center; justify-content: center; padding: 14px; }
.mq__ad { position: relative; flex: none; height: 90%; aspect-ratio: 9 / 16; overflow: hidden; border-radius: 14px; background: #111; border: 2px solid var(--card); box-shadow: 0 14px 30px -14px rgba(0, 0, 0, 0.55); }
.mq__ad img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mq__ad--a { transform: rotate(-7deg) translateX(16px); }
.mq__ad--b { z-index: 2; height: 100%; }
.mq__ad--c { transform: rotate(7deg) translateX(-16px); }
.mq__ig { position: absolute; top: 6px; left: 6px; padding: 2px 6px; border-radius: 999px; background: rgba(0, 0, 0, 0.4); color: #fff; font-size: 9px; font-weight: 700; }
.mq__hook { position: absolute; top: 36%; right: 6px; left: 6px; color: #fff; font-size: 10.5px; font-weight: 800; line-height: 1.1; text-align: center; text-shadow: 0 1px 6px rgba(0, 0, 0, 0.6); }
.mq__cta { position: absolute; right: 6px; bottom: 7px; left: 6px; padding: 4px 2px; border-radius: 7px; background: #fff; color: #111; font-size: 9px; font-weight: 700; text-align: center; white-space: nowrap; }
.mq__gan { position: absolute; top: 6px; right: 6px; display: inline-flex; align-items: center; gap: 2px; padding: 2px 6px; border-radius: 999px; background: #12a15a; color: #fff; font-size: 9px; font-weight: 700; }
.mq__gan .ic { width: 9px; height: 9px; }
/* Calculadoras: tus números */
.mq--calc { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); grid-template-rows: repeat(2, minmax(0, 1fr)); gap: 8px; }
.mq__tile { display: grid; align-content: center; gap: 1px; min-width: 0; padding: 6px 12px; border-radius: 16px; }
.mq__tile small, .mq__chart small { display: flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 600; color: var(--ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mq__tile small .ic { width: 13px; height: 13px; flex: none; color: var(--hc); }
.mq__tile b { font-size: 22px; font-weight: 760; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
.mq__tile em { font-size: 11px; font-style: normal; color: var(--ink-muted); }
.mq__tile--hero { border: 0; color: #fff; background: linear-gradient(140deg, var(--h1), var(--h2)); }
.mq__tile--hero small, .mq__tile--hero em, .mq__tile--hero small .ic { color: rgba(255, 255, 255, 0.88); }
.mq__chart { grid-column: 2; grid-row: 1 / span 2; display: grid; grid-template-rows: auto minmax(0, 1fr); gap: 8px; min-width: 0; padding: 10px 12px; border-radius: 16px; }
.mq__bars { position: relative; display: flex; align-items: flex-end; gap: 5px; min-height: 0; }
.mq__bars i { flex: 1; height: var(--h); border-radius: 5px 5px 2px 2px; background: color-mix(in srgb, var(--h2) 72%, transparent); }
.mq__bars i.is-bad { background: #ef4444; }
.mq__line { position: absolute; right: 0; bottom: 70%; left: 0; border-top: 1.5px dashed var(--ink-soft); }
/* Comunidad: los últimos resultados */
.mq--posts { display: grid; grid-template-rows: auto minmax(0, 1fr); gap: 8px; padding: 12px 16px; }
.mq__list { display: grid; align-content: start; gap: 5px; min-height: 0; overflow: hidden; }
.mq__post { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 4px 10px 4px 5px; border-radius: 14px; }
.mq__post .mq__tt b { font-size: 13px; }
.mq__post .mq__tt small { font-size: 11.5px; }
.mq__like { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--ink-muted); font-variant-numeric: tabular-nums; }
.mq__like .ic { width: 13px; height: 13px; color: #ef2f6a; }
.mq__sk { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 10px; align-items: center; padding: 7px; border-radius: 14px; }
.mq__sk > i { width: 30px; height: 30px; border-radius: 50%; background: var(--fill); }
.mq__sk span { display: grid; gap: 5px; }
.mq__sk span i { width: 70%; height: 8px; border-radius: 4px; background: var(--fill); }
.mq__sk span i + i { width: 45%; }
.mq__empty { align-self: center; font-size: 13.5px; color: var(--ink-soft); }
/* Soporte: una pregunta y su respuesta, con el minuto del curso */
.mq--chat { display: grid; align-content: center; gap: 10px; padding: 16px 18px; }
.mq__q { justify-self: end; max-width: 82%; padding: 8px 12px; border-radius: 16px 16px 4px 16px; background: var(--ink); color: var(--bg); font-size: 12.5px; font-weight: 560; }
.mq__a { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px; align-items: start; max-width: 96%; }
.mq__a > .gi { --s: 28px; }
.mq__a > span:last-child { display: grid; gap: 3px; padding: 9px 12px; border-radius: 4px 16px 16px 16px; background: var(--card); border: 1px solid var(--line-2); box-shadow: var(--shadow-sm); font-size: 12px; line-height: 1.4; color: var(--ink-soft); }
.mq__a b { font-size: 12.5px; font-weight: 650; color: var(--ink); }
.mq__a em { justify-self: start; display: inline-flex; align-items: center; gap: 4px; margin-top: 3px; padding: 3px 8px; border-radius: 999px; font-size: 11px; font-style: normal; font-weight: 650; color: var(--hc); background: color-mix(in srgb, var(--h2) 12%, transparent); }
.mq__a em .ic { width: 11px; height: 11px; }

/* Lo que había en el menú de la derecha y no es una sección: en tu cuenta y en Calculadoras */
.cu-link { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 14px; align-items: center; color: var(--ink); text-decoration: none; transition: transform .45s var(--ease-spring), box-shadow .35s; }
.cu-link:hover { transform: translate3d(0, -2px, 0); box-shadow: var(--shadow-md); }
.cu-link b { display: block; font-size: 16px; font-weight: 680; letter-spacing: -0.02em; }
.cu-link small { display: block; font-size: 13.5px; color: var(--ink-muted); }
.cu-link > .ic { width: 16px; height: 16px; color: var(--ink-muted); }
.sp__src { margin: 6px 0 0; font-size: 14px; }
.pop--menu .pop__i.is-on { background: var(--fill-2); }

@media (max-width: 1180px) {
  .mods { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mods > .mod, .mods > .mod--productos, .mods > .mod--tienda { grid-column: auto; }
  .mods > .mod:last-child { grid-column: 1 / -1; }
}
@media (max-width: 980px) {
  .pan__hero { grid-template-columns: minmax(0, 1fr); }
  .top__lvt { display: none; }
  .top__lvl { height: 38px; padding: 0 3px; }
}
@media (max-width: 680px) {
  .mods { grid-template-columns: minmax(0, 1fr); }
  .mods > .mod:last-child { grid-column: auto; }
  .top__lvl { height: 36px; padding: 0 2px; }
}