/* ============================================================
   MR MOBILE · Lista en Vivo — Re-skin "Mr. Mobile Design System"
   Near-black + verde neón (#32fb00), tipografía open-source, glow.
   ============================================================ */

/* ===== Familias open-source (SIL OFL), autoalojadas ===== */
@font-face { font-family:"Manrope"; src:url("assets/fonts/open-source/Manrope-Variable.ttf") format("truetype"); font-weight:200 800; font-display:swap; }
@font-face { font-family:"Space Grotesk"; src:url("assets/fonts/open-source/SpaceGrotesk-Variable.ttf") format("truetype"); font-weight:300 700; font-display:swap; }
@font-face { font-family:"Sora"; src:url("assets/fonts/open-source/Sora-Variable.ttf") format("truetype"); font-weight:100 800; font-display:swap; }
@font-face { font-family:"Plus Jakarta Sans"; src:url("assets/fonts/open-source/PlusJakartaSans-Variable.ttf") format("truetype"); font-weight:200 800; font-display:swap; }

:root {
  --bg:        #0a0a0a;
  --surface:   #101010;
  --raised:    #141414;
  --card:      #161616;
  --input:     #141414;
  --line:      rgba(255,255,255,.12);
  --line-2:    rgba(255,255,255,.07);
  --line-strong:#2a2a2a;

  --brand:     #32fb00;   /* verde neón */
  --brand-hover:#4dff29;
  --brand-press:#29d400;
  --brand-deep:#1e9e00;
  --brand-ink: #32fb00;
  --on-accent: #000000;

  --text:      #ffffff;
  --text-body: rgba(255,255,255,.82);
  --text-muted:rgba(255,255,255,.55);
  --text-faint:rgba(255,255,255,.32);

  --wa:        #32fb00;   /* CTAs de WhatsApp usan el verde de marca */
  --wa-dark:   #29d400;
  --ok:        #32fb00;
  --warn:      #f5b301;
  --danger:    #ff4d4d;
  --offer:     #32fb00;

  --glow:       0 0 24px rgba(50,251,0,.45);
  --glow-strong:0 0 40px rgba(50,251,0,.6);
  --glow-tight: 0 0 12px rgba(50,251,0,.5);

  --shadow:    0 8px 30px rgba(0,0,0,.5);
  --shadow-lg: 0 18px 55px rgba(0,0,0,.65);

  --font-display: "Manrope", system-ui, sans-serif;
  --font-emph:    "Sora", "Manrope", system-ui, sans-serif;

  --radius:    20px;
  --radius-md: 14px;
  --radius-sm: 10px;
  --pill:      999px;
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --ease: cubic-bezier(.22,1,.36,1);

  --maxw:   1180px;
  --gutter: 16px;

  /* glass sobre negro */
  --glass:     rgba(18,18,18,.62);
  --glass-2:   rgba(255,255,255,.05);
  --glass-brd: rgba(255,255,255,.12);
  --glass-blur:saturate(140%) blur(18px);
  --glass-hi:  inset 0 1px 0 rgba(255,255,255,.06);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html { overflow-x: hidden; scroll-behavior: smooth; }
html, body {
  margin: 0; padding: 0;
  color: var(--text-body);
  font-family: var(--font-display);
  -webkit-font-smoothing: antialiased;
}
body {
  background: var(--bg);
  padding-bottom: calc(96px + var(--safe-bottom));
  overflow-x: hidden;
  max-width: 100%;
}
.hidden { display: none !important; }

/* ===================== ACCESO PRIVADO ===================== */
body.access-pending, body.access-locked { overflow:hidden; }
.access-gate {
  position:fixed; inset:0; z-index:10000; overflow-y:auto; overscroll-behavior:contain;
  color:var(--text-body); background:var(--bg);
}
.access-ambient { position:fixed; inset:0; overflow:hidden; pointer-events:none; }
.access-ambient::before {
  content:""; position:absolute; inset:0;
  background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);
  background-size:48px 48px; mask-image:radial-gradient(circle at 42% 32%,#000,transparent 72%);
}
.access-ambient i { position:absolute; display:block; border-radius:50%; filter:blur(90px); opacity:.22; }
.access-ambient i:nth-child(1) { width:420px; height:420px; left:-140px; top:-150px; background:var(--brand); }
.access-ambient i:nth-child(2) { width:300px; height:300px; right:-90px; bottom:-80px; background:#1e9e00; }
.access-ambient i:nth-child(3) { width:180px; height:180px; left:52%; top:38%; background:var(--brand); opacity:.09; }
.access-shell { position:relative; z-index:1; width:min(1180px,calc(100% - 40px)); min-height:100%; margin:auto; display:flex; flex-direction:column; padding:30px 0 22px; }
.access-brand { display:flex; align-items:center; justify-content:space-between; gap:20px; }
.access-logo { display:inline-flex; align-items:center; min-height:48px; padding:7px 11px; border:1px solid var(--line); border-radius:14px; background:#0a0d0a; box-shadow:var(--glass-hi); }
.access-logo img { display:block; width:auto; height:30px; }
.access-private { display:inline-flex; align-items:center; gap:8px; padding:9px 13px; border:1px solid var(--line); border-radius:999px; background:var(--glass-2); color:var(--text-muted); font:750 10px/1 "Manrope",sans-serif; letter-spacing:.08em; text-transform:uppercase; }
.access-private i { width:8px; height:8px; border-radius:50%; background:var(--brand); box-shadow:var(--glow-tight); }
.access-layout { flex:1; display:grid; grid-template-columns:minmax(0,1.05fr) minmax(390px,.75fr); align-items:center; gap:clamp(45px,8vw,110px); padding:50px 0; }
.access-story { max-width:620px; }
.access-kicker,.access-card-kicker { display:block; color:var(--brand-ink); font:800 11px/1.2 "Manrope",sans-serif; letter-spacing:.16em; text-transform:uppercase; }
.access-story h1 { margin:16px 0 20px; color:var(--text); font:650 clamp(46px,6vw,78px)/.98 "Sora",sans-serif; letter-spacing:-.055em; }
.access-story h1 em { display:block; color:var(--brand); font-style:normal; text-shadow:var(--glow); }
.access-story>p { max-width:570px; margin:0; color:var(--text-muted); font:500 16px/1.65 "Manrope",sans-serif; }
.access-benefits { display:grid; gap:9px; margin-top:32px; }
.access-benefits span { display:flex; align-items:center; gap:13px; color:var(--text-body); font:650 13px/1.35 "Manrope",sans-serif; }
.access-benefits b { width:32px; height:32px; display:grid; place-items:center; flex:none; border:1px solid rgba(50,251,0,.25); border-radius:10px; background:rgba(50,251,0,.08); color:var(--brand-ink); font:800 9px/1 "Sora",sans-serif; }
.access-card { min-height:440px; display:flex; flex-direction:column; justify-content:center; padding:clamp(24px,4vw,38px); border:1px solid var(--line); border-radius:26px; background:rgba(18,18,18,.82); box-shadow:0 28px 80px rgba(0,0,0,.38),var(--glass-hi); backdrop-filter:blur(24px); }
.access-loading { display:grid; justify-items:center; gap:8px; padding:50px 15px; text-align:center; }
.access-loading strong { color:var(--text); font:750 16px/1.3 "Sora",sans-serif; }
.access-loading small { color:var(--text-muted); font-size:12px; }
.access-spinner { width:38px; height:38px; margin-bottom:10px; border:3px solid var(--line); border-top-color:var(--brand); border-radius:50%; animation:accessSpin .8s linear infinite; }
@keyframes accessSpin { to { transform:rotate(360deg); } }
.access-request-view,.access-invite-view { display:grid; gap:11px; }
.access-card-icon { width:52px; height:52px; display:grid; place-items:center; margin-bottom:8px; border-radius:16px; background:rgba(50,251,0,.11); font-size:24px; }
.access-card h2 { margin:2px 0 0; color:var(--text); font:750 clamp(25px,3vw,34px)/1.08 "Sora",sans-serif; letter-spacing:-.04em; }
.access-card p { margin:1px 0 7px; color:var(--text-muted); font-size:13px; line-height:1.55; }
.access-primary { width:100%; min-height:51px; display:flex; align-items:center; justify-content:center; gap:12px; padding:0 17px; border:0; border-radius:14px; background:var(--brand); color:#061005; text-decoration:none; cursor:pointer; box-shadow:var(--glow-tight); font:800 13px/1 "Manrope",sans-serif; transition:.16s var(--ease); }
.access-primary:active { transform:scale(.985); }
.access-primary:disabled { opacity:.55; cursor:wait; box-shadow:none; }
.access-primary b { font-size:18px; }
.access-secondary { min-height:45px; display:flex; align-items:center; justify-content:center; padding:0 14px; border:1px solid var(--line); border-radius:13px; color:var(--text); text-decoration:none; font:700 11px/1 "Manrope",sans-serif; }
.access-trust { display:block; margin-top:5px; color:var(--text-faint); font:500 10.5px/1.5 "Manrope",sans-serif; text-align:center; }
.access-form { display:grid; gap:9px; margin-top:5px; }
.access-form>label:first-child,.access-optional label { color:var(--text); font:750 11px/1.25 "Manrope",sans-serif; }
.access-form input:not([type="checkbox"]),.access-form select { width:100%; min-height:48px; padding:0 13px; border:1px solid var(--line); border-radius:12px; outline:0; background:var(--input); color:var(--text); font:600 14px/1 "Manrope",sans-serif; }
.access-form input:focus,.access-form select:focus { border-color:var(--brand); box-shadow:0 0 0 3px rgba(50,251,0,.1); }
.access-optional { overflow:hidden; border:1px solid var(--line); border-radius:13px; background:var(--raised); }
.access-optional summary { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 13px; cursor:pointer; list-style:none; }
.access-optional summary::-webkit-details-marker { display:none; }
.access-optional summary span { display:grid; gap:3px; }
.access-optional summary b { color:var(--text); font:750 11px/1.2 "Manrope",sans-serif; }
.access-optional summary small { color:var(--brand-ink); font-size:9.5px; }
.access-optional summary i { color:var(--brand); font-size:19px; font-style:normal; transition:transform .18s; }
.access-optional[open] summary i { transform:rotate(180deg); }
.access-optional>div { display:grid; gap:8px; padding:12px 13px 14px; border-top:1px solid var(--line); }
.access-optional-intro { margin:0 0 2px !important; padding:9px 10px; border-radius:10px; background:rgba(50,251,0,.06); color:var(--text-muted) !important; font-size:10px !important; line-height:1.45 !important; }
.access-optional label { display:flex; justify-content:space-between; gap:8px; }
.access-optional em { color:var(--brand-ink); font-size:8px; font-style:normal; text-transform:uppercase; }
.access-consent { display:grid; grid-template-columns:auto 1fr; align-items:start; gap:9px; margin:2px 0; color:var(--text-muted); font:500 10.5px/1.45 "Manrope",sans-serif; cursor:pointer; }
.access-consent input { width:19px; height:19px; margin:1px 0 0; accent-color:var(--brand); }
.access-message { min-height:17px; margin:0 !important; color:var(--danger) !important; font-size:11px !important; text-align:center; }
.access-recover-view { display:grid; gap:11px; }
.access-member-entry { border-style:dashed; color:var(--text-muted); cursor:pointer; background:transparent; }
.access-recover-start { display:grid; gap:8px; }
.access-footer { display:flex; align-items:center; justify-content:space-between; gap:20px; padding-top:18px; border-top:1px solid var(--line-2); color:var(--text-faint); font:650 9px/1.2 "Manrope",sans-serif; letter-spacing:.06em; text-transform:uppercase; }
.access-footer span:first-child { color:var(--text-muted); font-weight:800; }
@media (hover:hover) {
  .access-primary:hover { transform:translateY(-1px); background:var(--brand-hover); box-shadow:var(--glow); }
  .access-secondary:hover { border-color:var(--brand); }
}
@media (max-width:839px) {
  .access-shell { width:min(100% - 28px,620px); padding:18px 0; }
  .access-layout { display:block; padding:32px 0 24px; }
  .access-story { text-align:center; }
  .access-story h1 { margin:13px 0 14px; font-size:clamp(38px,12vw,58px); }
  .access-story>p { margin:auto; font-size:13px; }
  .access-benefits { margin:24px auto 26px; width:max-content; max-width:100%; text-align:left; }
  .access-card { min-height:0; padding:23px; border-radius:22px; }
  .access-footer { align-items:flex-start; flex-direction:column; gap:5px; }
}
@media (max-width:420px) {
  .access-private { padding:8px 10px; font-size:8px; }
  .access-logo { min-height:43px; }
  .access-logo img { height:26px; }
  .access-layout { padding-top:25px; }
  .access-story h1 { font-size:38px; }
  .access-benefits span { font-size:11.5px; }
  .access-card { padding:19px; }
}

h1, h2 { font-family: var(--font-display); }

/* Labels, botones y categorías usan Sora, sans serif moderna. */
.hero-tagline, .cat-title, .stat-label, .chip, .fchip, .mini-toggle,
.btn-order, .btn-wa, .btn-add, .detail-share, .cart-open, .card-price,
.badge-offer, .filter-label, .hero-enter, .hero-install, .updated-at, .result-count {
  font-family: var(--font-emph);
}

/* ===================== REVEAL ===================== */
.reveal { opacity: 0; transform: translateY(24px); will-change: transform, opacity;
  transition: opacity .75s var(--ease), transform .75s var(--ease); transition-delay: var(--d, 0s); }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1 !important; transform: none !important; transition: none; }
  * { animation-duration: .001s !important; }
}

/* ===================== HERO ===================== */
.hero {
  position: relative; overflow: hidden; color: var(--text);
  background: var(--bg);
  padding: 30px 20px 66px; text-align: center;
}
.hero-bg { position: absolute; inset: 0; z-index: 0; }
/* spotlight verde de marca */
.hero-bg::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(60% 55% at 50% 34%, rgba(50,251,0,.18), transparent 70%);
}
.orb { position: absolute; border-radius: 50%; filter: blur(60px); opacity: .5; }
.orb-1 { width: 300px; height: 300px; background: #1e9e00; top: -90px; left: -70px; animation: float1 15s ease-in-out infinite; }
.orb-2 { width: 240px; height: 240px; background: #32fb00; bottom: -80px; right: -60px; opacity: .28; animation: float2 17s ease-in-out infinite; }
.orb-3 { width: 200px; height: 200px; background: #0c2e00; top: 40%; left: 55%; animation: float3 19s ease-in-out infinite; }
@keyframes float1 { 50% { transform: translate(50px,40px) scale(1.12); } }
@keyframes float2 { 50% { transform: translate(-40px,-30px) scale(1.08); } }
@keyframes float3 { 50% { transform: translate(-50px,30px) scale(1.15); } }
.hero-grid-overlay {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size: 40px 40px;
  mask-image: radial-gradient(circle at 50% 30%, #000 0%, transparent 72%);
}

.hero-inner { position: relative; z-index: 1; max-width: 640px; margin: 0 auto; }

.hero-brandrow { display: flex; align-items: center; justify-content: center; gap: 14px; margin-bottom: 24px; }
.brand-logo { height: 40px; display: flex; align-items: center; }
.brand-logo img { height: 40px; display: block; }
.hero-badge {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--font-emph); font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  padding: 7px 13px; border-radius: var(--pill);
  background: var(--glass-2); border: 1px solid var(--glass-brd); color: var(--text-body);
}
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--brand); display: inline-block; box-shadow: var(--glow-tight); animation: pulse 1.8s infinite; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(50,251,0,.55); } 70% { box-shadow: 0 0 0 9px rgba(50,251,0,0); } 100% { box-shadow: 0 0 0 0 rgba(50,251,0,0); } }

.hero-title {
  font-family: var(--font-display); font-weight: 300;
  font-size: clamp(42px, 13.5vw, 66px); line-height: .96; letter-spacing: -.02em;
  text-transform: uppercase; margin: 6px 0 16px; color: var(--text);
}
.hero-title .grad {
  display: block; font-weight: 600; color: var(--brand);
  text-shadow: var(--glow); animation: glowPulse 3s ease-in-out infinite;
}
@keyframes glowPulse { 50% { text-shadow: var(--glow-strong); } }

.hero-tagline {
  font-family: var(--font-emph); font-weight: 700; text-transform: uppercase;
  font-size: clamp(15px, 4.4vw, 19px); line-height: 1.18; letter-spacing: .01em;
  color: var(--text); max-width: 440px; margin: 0 auto 14px;
}
.hero-support {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 5px 12px;
  font-family: var(--font-display); font-size: 13px; font-weight: 400; letter-spacing: .01em;
  color: var(--text-muted); margin: 0 auto 26px; max-width: 440px;
}
.hero-support i { color: var(--brand); font-style: normal; }

.hero-stats { display: flex; justify-content: center; gap: 12px; margin-bottom: 24px; }
.stat {
  flex: 1; max-width: 130px; background: var(--raised);
  border: 1px solid var(--line); border-radius: var(--radius-md); padding: 15px 8px;
}
.stat-num { display: block; font-family: var(--font-display); font-size: 30px; font-weight: 600; color: var(--text); line-height: 1; }
.stat-num.live { display: flex; justify-content: center; align-items: center; height: 30px; }
.stat-num.live .dot { width: 14px; height: 14px; }
.stat-label { display: block; font-family: var(--font-emph); font-size: 10px; font-weight: 700; color: var(--text-faint); margin-top: 7px; text-transform: uppercase; letter-spacing: .16em; }

/* Intro al listado — botón outline + chevron */
.hero-enter {
  display: inline-flex; align-items: center; gap: 10px; margin-top: 2px;
  padding: 13px 22px; border-radius: var(--pill);
  background: transparent; border: 1.5px solid var(--brand); color: var(--text);
  font-family: var(--font-emph); font-weight: 700; font-size: 13px; letter-spacing: .04em; text-transform: uppercase;
  text-decoration: none; transition: background .2s var(--ease), box-shadow .2s var(--ease), transform .15s var(--ease);
}
.hero-enter:active { transform: scale(.96); }
@media (hover: hover) { .hero-enter:hover { background: rgba(50,251,0,.1); box-shadow: var(--glow-tight); } }
.hero-enter-emoji { font-size: 15px; }
.hero-enter-chev { font-size: 18px; line-height: .5; color: var(--brand); animation: bounce 1.6s infinite; }
@keyframes bounce { 0%,100% { transform: translateY(0); } 50% { transform: translateY(5px); } }

.hero-studio {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 18px; padding: 13px 24px; border-radius: var(--pill);
  background: var(--brand); color: var(--on-accent); border: 0;
  font-family: var(--font-emph); font-weight: 800; font-size: 13px; letter-spacing: .04em; text-transform: uppercase;
  cursor: pointer; box-shadow: var(--glow); transition: transform .15s var(--ease), box-shadow .2s var(--ease);
}
.hero-studio:active { transform: scale(.96); }
@media (hover: hover) { .hero-studio:hover { background: var(--brand-hover); box-shadow: var(--glow-strong); } }


.install-card {
  display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:10px;
  margin-top:10px; padding:10px 12px; border:1px solid rgba(50,251,0,.28); border-radius:14px;
  background:linear-gradient(120deg,rgba(50,251,0,.1),rgba(50,251,0,.03)); text-align:left;
}
.install-card-icon { position:relative; width:36px; height:36px; flex:none; }
.install-card-icon img { width:100%; height:100%; display:block; border-radius:12px; box-shadow:0 7px 18px rgba(0,0,0,.22); }
.install-card-icon i { position:absolute; right:-2px; top:-2px; width:11px; height:11px; border:2px solid var(--surface); border-radius:50%; background:#ff3b30; box-shadow:0 2px 7px rgba(255,59,48,.5); }
.install-card-copy { min-width:0; display:grid; gap:3px; }
.install-card-copy b { color:var(--text); font:750 12px/1.25 "Manrope",sans-serif; }
.install-card-copy small { color:var(--text-muted); font:500 10.5px/1.35 "Manrope",sans-serif; }
.install-card button { min-height:36px; padding:0 13px; border:0; border-radius:11px; background:var(--brand); color:var(--on-accent); font:800 10px/1 "Manrope",sans-serif; cursor:pointer; white-space:nowrap; box-shadow:var(--glow-tight); }
.install-card button:active { transform:scale(.97); }

.notification-card {
  display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:10px;
  margin-top:10px; padding:10px 12px; border:1px solid rgba(50,251,0,.2); border-radius:14px;
  background:rgba(50,251,0,.05); text-align:left;
}
.notification-card-icon { width:34px; height:34px; display:grid; place-items:center; border-radius:11px; background:rgba(50,251,0,.12); font-size:16px; }
.notification-card-copy { min-width:0; display:grid; gap:3px; }
.notification-card-copy b { color:var(--text); font:750 12px/1.25 "Manrope",sans-serif; }
.notification-card-copy small { color:var(--text-muted); font:500 10.5px/1.35 "Manrope",sans-serif; }
.notification-card button { min-height:36px; padding:0 12px; border:0; border-radius:11px; background:var(--brand); color:var(--on-accent); font:800 10px/1 "Manrope",sans-serif; cursor:pointer; white-space:nowrap; }
.notification-card button[data-state="active"] { color:var(--text); background:transparent; border:1px solid var(--line); }
.notification-card button:disabled { cursor:not-allowed; opacity:.58; }

.install-sheet { max-width:610px; }
.install-modal-kicker { display:block; margin-bottom:5px; color:var(--brand); font:800 9px/1.2 "Manrope",sans-serif; letter-spacing:.14em; text-transform:uppercase; }
.install-sheet .modal-head { padding:20px 20px 12px; border-bottom:1px solid var(--line-2); }
.install-sheet .modal-head h2 { text-transform:none; letter-spacing:-.025em; font:750 22px/1.15 "Sora",sans-serif; }
.install-body { overflow-y:auto; padding:18px 20px calc(22px + var(--safe-bottom)); }
.install-hero { display:grid; grid-template-columns:auto minmax(0,1fr); align-items:center; gap:16px; padding:16px; border:1px solid rgba(50,251,0,.2); border-radius:18px; background:rgba(50,251,0,.055); }
.install-app-icon { position:relative; width:68px; height:68px; }
.install-app-icon img { width:100%; height:100%; display:block; border-radius:19px; box-shadow:0 12px 26px rgba(0,0,0,.28); }
.install-app-icon i { position:absolute; right:-7px; top:-7px; min-width:25px; height:25px; display:grid; place-items:center; padding:0 6px; border:3px solid var(--surface); border-radius:999px; background:#ff3b30; color:#fff; font:800 11px/1 "Manrope",sans-serif; box-shadow:0 5px 12px rgba(255,59,48,.38); }
.install-hero strong { display:block; color:var(--text); font:750 17px/1.2 "Sora",sans-serif; letter-spacing:-.02em; }
.install-hero p { margin:6px 0 0; color:var(--text-muted); font:500 12px/1.5 "Manrope",sans-serif; }
.install-benefits { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; margin-top:12px; }
.install-benefits>span { min-width:0; display:grid; justify-items:start; gap:3px; padding:12px; border:1px solid var(--line); border-radius:14px; background:var(--raised); }
.install-benefits i { width:28px; height:28px; display:grid; place-items:center; margin-bottom:3px; border-radius:9px; background:rgba(50,251,0,.1); color:var(--brand); font-style:normal; font-size:14px; }
.install-benefits b { color:var(--text); font:750 10.5px/1.3 "Manrope",sans-serif; }
.install-benefits small { color:var(--text-faint); font:500 9.5px/1.35 "Manrope",sans-serif; }
.install-guide { margin-top:18px; }
.install-guide-label { display:block; margin-bottom:9px; color:var(--text-muted); font:800 9.5px/1.2 "Manrope",sans-serif; letter-spacing:.1em; text-transform:uppercase; }
.install-guide ol { display:grid; gap:8px; margin:0; padding:0; list-style:none; counter-reset:install-step; }
.install-guide li { counter-increment:install-step; display:grid; grid-template-columns:30px minmax(0,1fr); align-items:center; gap:10px; min-height:45px; padding:8px 11px; border:1px solid var(--line); border-radius:13px; background:var(--card); color:var(--text-body); font:600 11.5px/1.4 "Manrope",sans-serif; }
.install-guide li::before { content:counter(install-step); width:28px; height:28px; display:grid; place-items:center; border-radius:9px; background:var(--brand); color:var(--on-accent); font:800 11px/1 "Manrope",sans-serif; }
.install-guide li b { color:var(--text); }
.install-footnote { margin:12px 2px 0; color:var(--text-muted); font:500 10.5px/1.45 "Manrope",sans-serif; }
.install-footnote b { color:var(--text); }
.install-actions { display:grid; grid-template-columns:minmax(0,1.35fr) minmax(0,1fr); gap:8px; margin-top:16px; }
.install-actions .btn-wa,.install-actions .btn-ghost { width:100%; min-height:48px; margin:0; }
@media (max-width:520px) {
  .install-sheet .modal-head { padding:16px 16px 10px; }
  .install-sheet .modal-head h2 { font-size:19px; }
  .install-body { padding:14px 16px calc(18px + var(--safe-bottom)); }
  .install-hero { gap:12px; padding:13px; }
  .install-app-icon { width:58px; height:58px; }
  .install-hero strong { font-size:15px; }
  .install-benefits { gap:6px; }
  .install-benefits>span { padding:9px 8px; }
  .install-benefits small { font-size:8.7px; }
  .install-actions { grid-template-columns:1fr; }
}

.profile-entry {
  width:100%; display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:11px;
  margin:2px 0 4px; padding:12px; border:1px solid var(--line); border-radius:15px;
  background:var(--raised); color:var(--text); text-align:left; cursor:pointer; transition:.18s var(--ease);
}
.profile-entry:active { transform:scale(.985); }
@media (hover:hover) { .profile-entry:hover { border-color:var(--brand); background:rgba(50,251,0,.07); } }
.profile-avatar { width:40px; height:40px; display:grid; place-items:center; border-radius:13px; background:rgba(50,251,0,.12); font-size:19px; }
.profile-entry-copy { min-width:0; display:grid; gap:3px; }
.profile-entry-copy b { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font:750 13px/1.2 "Manrope",sans-serif; }
.profile-entry-copy small { color:var(--text-muted); font:500 10.5px/1.3 "Manrope",sans-serif; }
.profile-entry-arrow { color:var(--brand); font-size:20px; }
.profile-entry.has-profile { border-color:rgba(50,251,0,.35); background:rgba(50,251,0,.07); }

.profile-sheet { max-width:500px; }
.profile-modal-kicker { display:block; margin-bottom:4px; color:var(--brand); font:800 9px/1.2 "Manrope",sans-serif; letter-spacing:.13em; text-transform:uppercase; }
.profile-body { overflow-y:auto; padding:8px 20px calc(24px + var(--safe-bottom)); }
.profile-welcome { display:grid; grid-template-columns:auto 1fr; gap:12px; padding:15px; border:1px solid rgba(50,251,0,.18); border-radius:16px; background:rgba(50,251,0,.055); }
.profile-welcome>span { width:42px; height:42px; display:grid; place-items:center; border-radius:14px; background:rgba(50,251,0,.13); font-size:21px; }
.profile-welcome b { color:var(--text); font:750 14px/1.3 "Sora",sans-serif; }
.profile-welcome p { margin:5px 0 0; color:var(--text-muted); font-size:12px; line-height:1.5; }
.profile-form { display:grid; gap:9px; margin-top:18px; }
.profile-form>label:first-child,.profile-form>label[for="profileWhatsapp"] { color:var(--text); font:750 12px/1.2 "Manrope",sans-serif; }
.profile-form>input { width:100%; min-height:50px; border:1.5px solid var(--line); border-radius:13px; background:var(--input); color:var(--text); padding:0 14px; font:650 16px/1 "Manrope",sans-serif; outline:0; }
.profile-form>input:focus { border-color:var(--brand); box-shadow:0 0 0 3px rgba(50,251,0,.12); }
.profile-optional { margin-top:3px; border:1px solid var(--line); border-radius:15px; overflow:hidden; background:var(--raised); }
.profile-optional-toggle { width:100%; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:13px 14px; border:0; background:transparent; color:var(--text); text-align:left; cursor:pointer; }
.profile-optional-toggle>span { display:grid; gap:3px; }
.profile-optional-toggle b { font:750 12px/1.2 "Manrope",sans-serif; }
.profile-optional-toggle small { color:var(--brand); font-size:10px; }
.profile-optional-toggle i { color:var(--brand); font-size:20px; font-style:normal; transition:transform .18s; }
.profile-optional-toggle[aria-expanded="true"] i { transform:rotate(180deg); }
.profile-business-fields { display:grid; gap:8px; padding:0 14px 15px; border-top:1px solid var(--line); }
.profile-business-fields>p { margin:12px 0 2px; color:var(--text-muted); font-size:11px; line-height:1.5; }
.profile-business-fields>p b { color:var(--text); }
.profile-business-fields label,#profileAddressField label { display:flex; justify-content:space-between; gap:10px; color:var(--text); font:700 11px/1.3 "Manrope",sans-serif; }
.profile-business-fields label em,#profileAddressField label em { color:var(--brand); font-size:9px; font-style:normal; font-weight:750; text-transform:uppercase; }
.profile-business-fields input,.profile-business-fields select,#profileAddressField input { width:100%; min-height:45px; border:1px solid var(--line); border-radius:11px; background:var(--input); color:var(--text); padding:0 12px; font:550 14px/1 "Manrope",sans-serif; outline:0; }
.profile-business-fields input:focus,.profile-business-fields select:focus,#profileAddressField input:focus { border-color:var(--brand); box-shadow:0 0 0 3px rgba(50,251,0,.1); }
#profileAddressField { display:grid; gap:8px; margin-top:2px; }
#profileAddressField>small { color:var(--text-faint); font-size:9.5px; line-height:1.4; }
.profile-consent { display:grid; grid-template-columns:auto 1fr; gap:10px; align-items:start; margin-top:4px; color:var(--text-muted); font-size:11.5px; line-height:1.5; cursor:pointer; }
.profile-consent input { width:20px; height:20px; margin:1px 0 0; accent-color:var(--brand); }
.profile-privacy { margin:0; color:var(--text-faint); font-size:10.5px; line-height:1.45; }
.profile-save { width:100%; margin-top:4px; text-transform:none; letter-spacing:0; }
.profile-save:disabled { opacity:.55; cursor:not-allowed; }
.profile-message { min-height:18px; margin:0; color:var(--brand); font-size:11.5px; text-align:center; }
.profile-delete { width:100%; margin-top:8px; padding:12px; border:0; background:transparent; color:var(--text-faint); font-size:11px; cursor:pointer; }
.profile-delete:hover { color:var(--danger); }
.profile-member-invite { width:100%; min-height:45px; margin-top:11px; border:1px solid rgba(50,251,0,.3); border-radius:12px; background:rgba(50,251,0,.07); color:var(--brand-ink); font:750 11.5px/1 "Manrope",sans-serif; cursor:pointer; }
.profile-member-invite:disabled { opacity:.55; cursor:wait; }
.profile-device-link { border-color:var(--line); background:transparent; color:var(--text); }
.profile-logout { border-color:var(--line); background:transparent; color:var(--text-muted); }

.hero-share {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 10px; padding: 12px 22px; border-radius: var(--pill);
  background: transparent; color: var(--text); border: 1.5px solid var(--brand);
  font-family: var(--font-emph); font-weight: 800; font-size: 12px; letter-spacing: .04em; text-transform: uppercase;
  cursor: pointer; transition: transform .15s var(--ease), box-shadow .2s var(--ease), background .2s;
}
.hero-share:active { transform: scale(.96); }
@media (hover: hover) { .hero-share:hover { box-shadow: var(--glow-tight); background: rgba(50,251,0,.08); } }

/* ===================== COMPARTIR · QR ===================== */
.qr-sheet { max-width: 420px; }
.qr-body { padding: 4px 20px 22px; text-align: center; }
.qr-intro { color: var(--text-muted); font-size: 14px; line-height: 1.5; margin: 6px auto 18px; max-width: 320px; }
.qr-intro b { color: var(--brand); }
.qr-card {
  background: #fff; border-radius: var(--radius-lg); padding: 22px 22px 16px; width: fit-content; margin: 0 auto;
  box-shadow: 0 10px 40px rgba(50,251,0,.18), 0 0 0 1px rgba(255,255,255,.08);
}
.qr-canvas-wrap { display: grid; place-items: center; }
.qr-canvas-wrap canvas { display: block; width: 240px; height: 240px; image-rendering: pixelated; border-radius: 6px; }
.qr-card-brand { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 12px; }
.qr-card-brand img { height: 20px; width: auto; }
.qr-card-brand span { font-family: var(--font-emph); font-weight: 800; font-size: 12px; letter-spacing: .04em; text-transform: uppercase; color: #0a0a0a; }
.qr-link {
  display: flex; align-items: center; gap: 8px; margin: 18px auto 0; max-width: 340px;
  background: var(--input); border: 1px solid var(--line); border-radius: var(--radius-md); padding: 8px 8px 8px 14px;
}
.qr-url { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; color: var(--text); text-align: left; }
.qr-copy {
  flex: none; padding: 8px 14px; border-radius: var(--radius-sm); border: 0; cursor: pointer;
  background: var(--brand); color: var(--on-accent); font-family: var(--font-emph); font-weight: 800; font-size: 12px; letter-spacing: .03em; text-transform: uppercase;
  transition: transform .12s var(--ease);
}
.qr-copy:active { transform: scale(.94); }
.qr-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 16px; }
.qr-actions .btn-ghost, .qr-actions .btn-wa { width: 100%; justify-content: center; }

.quote-btn { width: 100%; justify-content: center; margin-top: 10px; }

/* ===================== GALERÍA DE PUBLICACIONES ===================== */
.modal-head-actions { display: flex; align-items: center; gap: 10px; }
.head-chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: var(--pill);
  background: var(--raised); border: 1px solid var(--line); color: var(--text);
  font-family: var(--font-emph); font-weight: 700; font-size: 12px; letter-spacing: .02em; cursor: pointer; transition: .15s;
}
@media (hover: hover) { .head-chip:hover { border-color: var(--brand); box-shadow: var(--glow-tight); } }
.head-chip .gcount { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--brand); color: var(--on-accent); font-size: 11px; font-weight: 800; }

.gallery-sheet { max-width: 560px; }
.gallery-body { padding: 8px 20px 24px; }
.gallery-empty { text-align: center; color: var(--text-muted); font-size: 14px; line-height: 1.6; padding: 40px 10px; }
.gallery-empty b { color: var(--brand); }
.gallery-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
@media (min-width: 480px) { .gallery-grid { grid-template-columns: repeat(3, 1fr); } }
.gcard { position: relative; margin: 0; border-radius: var(--radius-md); overflow: hidden; border: 1px solid var(--line); background: var(--raised); }
.gcard img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.gcard figcaption { position: absolute; top: 8px; left: 8px; padding: 3px 8px; border-radius: var(--pill); background: rgba(0,0,0,.6); color: #fff; font-size: 11px; font-weight: 700; backdrop-filter: blur(4px); }
.gcard-actions { position: absolute; inset: auto 0 0 0; display: flex; gap: 2px; padding: 8px; background: linear-gradient(to top, rgba(0,0,0,.72), transparent); }
.gcard-actions button { flex: 1; padding: 7px 0; border: 0; border-radius: var(--radius-sm); background: rgba(255,255,255,.12); color: #fff; font-size: 15px; cursor: pointer; transition: .12s; }
.gcard-actions button:active { transform: scale(.9); }
@media (hover: hover) { .gcard-actions button:hover { background: rgba(255,255,255,.24); } }

/* ===================== CONTROLES (sticky glass) ===================== */
.controls {
  position: sticky; top: 0; z-index: 30;
  background: var(--glass); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
  padding-block: 10px 11px; border-bottom: 1px solid var(--line);
  box-shadow: var(--glass-hi);
  padding-inline: max(var(--gutter), calc((100% - var(--maxw)) / 2));
}
.statusbar, .cat-title, .grid { padding-inline: max(var(--gutter), calc((100% - var(--maxw)) / 2)); }

.controls-brand { display: flex; align-items: center; justify-content: space-between; padding: 2px 2px 9px; }
.mini-logo { display: flex; align-items: center; height: 22px; }
.mini-logo img { height: 22px; display: block; }
.controls-brand-right { display: flex; align-items: center; gap: 10px; }
.mini-live { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-emph); font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--brand); }
.mini-live .dot { width: 7px; height: 7px; }
.mini-refresh { width: 32px; height: 32px; border-radius: var(--radius-sm); border: 1px solid var(--line); background: var(--raised); color: var(--brand); font-size: 16px; cursor: pointer; display: grid; place-items: center; transition: .15s; }
.mini-refresh:active { transform: scale(.9); }
@media (hover: hover) { .mini-refresh:hover { border-color: var(--brand); box-shadow: var(--glow-tight); } }
.refresh-ico { display: inline-block; font-size: 16px; }
.spinning .refresh-ico { animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.search-wrap { position: relative; display: flex; align-items: center; background: var(--input); border: 1.5px solid var(--line); border-radius: var(--radius-md); padding: 0 12px; transition: border-color .2s, box-shadow .2s; }
.search-wrap:focus-within { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(50,251,0,.14); }
.search-ico { font-size: 16px; opacity: .6; }
#search { flex: 1; border: 0; outline: 0; background: transparent; font-size: 16px; padding: 13px 8px; color: var(--text); font-family: var(--font-display); }
#search::placeholder { color: var(--text-faint); }
.clear-search { border: 0; background: rgba(255,255,255,.1); color: var(--text-muted); width: 24px; height: 24px; border-radius: 50%; font-size: 13px; cursor: pointer; display: none; }
.clear-search.show { display: block; }

.chips { display: flex; gap: 8px; overflow-x: auto; padding: 11px 2px 3px; scrollbar-width: none; }
.chips::-webkit-scrollbar { display: none; }
@media (min-width: 760px) { .chips { flex-wrap: wrap; overflow-x: visible; } }
.chip {
  flex: none; color: var(--text-muted); background: var(--raised); border: 1px solid var(--line);
  padding: 9px 15px; border-radius: var(--pill); font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  cursor: pointer; white-space: nowrap; transition: .18s var(--ease);
}
.chip:active { transform: scale(.95); }
@media (hover: hover) { .chip:hover { color: var(--text); border-color: var(--brand); } }
.chip.active { background: var(--brand); border-color: transparent; color: var(--on-accent); box-shadow: var(--glow-tight); }

.subcontrols { display: flex; align-items: center; gap: 8px; margin-top: 9px; flex-wrap: wrap; }
.spacer { flex: 1; }
.mini-toggle { border: 1px solid var(--line); background: var(--raised); color: var(--text-muted); padding: 8px 13px; border-radius: var(--pill); font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; cursor: pointer; transition: .15s; }
.mini-toggle[aria-pressed="true"] { background: rgba(50,251,0,.12); border-color: var(--brand); color: var(--brand); }
.fcount { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; margin-left: 6px; border-radius: var(--pill); background: var(--brand); color: var(--on-accent); font-size: 11px; font-weight: 800; }
.sort-label select { border: 1px solid var(--line); background: var(--raised); color: var(--text); padding: 8px 11px; border-radius: var(--radius-sm); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; cursor: pointer; outline: none; font-family: var(--font-emph); }

/* ===================== STATUS BAR ===================== */
.statusbar { display: flex; align-items: center; justify-content: space-between; padding-block: 16px 2px; font-size: 12px; }
.result-count { color: var(--text); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.updated-at { color: var(--text-faint); display: flex; align-items: center; gap: 5px; text-transform: uppercase; letter-spacing: .06em; font-size: 11px; }
.updated-at::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--brand); box-shadow: var(--glow-tight); }

/* ===================== GRID ===================== */
.grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; padding-block: 14px; }
@media (min-width: 480px) { .grid { grid-template-columns: repeat(3, 1fr); gap: 14px; } }
@media (min-width: 760px) { .grid { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1040px) { .grid { grid-template-columns: repeat(5, 1fr); } }

.cat-title { display: flex; align-items: center; gap: 10px; font-family: var(--font-emph); font-size: 17px; font-weight: 800; color: var(--text); letter-spacing: .02em; text-transform: uppercase; padding-block: 24px 0; }
.cat-title .count { font-family: var(--font-emph); font-size: 11px; font-weight: 800; color: var(--brand); background: rgba(50,251,0,.12); padding: 3px 10px; border-radius: var(--pill); }
.cat-section .grid { padding-top: 12px; }

/* ===================== CARD ===================== */
.card {
  background: var(--card); border-radius: var(--radius); overflow: hidden;
  box-shadow: var(--glass-hi), var(--shadow); display: flex; flex-direction: column; position: relative;
  container: card / inline-size;
  border: 1px solid var(--line-2);
  animation: cardIn .55s var(--ease) both;
  transition: transform .28s var(--ease), box-shadow .28s var(--ease), border-color .28s var(--ease);
}
@keyframes cardIn { from { opacity: 0; transform: translateY(16px) scale(.98); } }
@media (hover: hover) { .card:hover { transform: translateY(-6px); border-color: rgba(50,251,0,.45); box-shadow: var(--shadow-lg), var(--glow-tight); } }
.card:active { transform: scale(.99); }

.card-imgwrap {
  position: relative; aspect-ratio: 1/1; cursor: pointer; overflow: hidden;
  background: #fff; border-bottom: 1px solid var(--line-2);
}
.card-imgwrap img { width: 100%; height: 100%; object-fit: contain; padding: 12px; display: block; transition: transform .45s var(--ease); }
@media (hover: hover) { .card:hover .card-imgwrap img { transform: scale(1.07); } }
.card-imgwrap .img-fallback { width: 100%; height: 100%; display: grid; place-items: center; font-size: 42px; background: #fff; }

.card-expand {
  position: absolute; bottom: 8px; right: 8px; width: 30px; height: 30px; border-radius: 50%;
  background: rgba(10,10,10,.72); backdrop-filter: blur(6px); border: 1px solid rgba(255,255,255,.18);
  color: #fff; font-size: 14px; cursor: pointer; display: grid; place-items: center; transition: .15s var(--ease);
}
.card-expand:active { transform: scale(.88); }
@media (hover: hover) { .card:hover .card-expand { background: var(--brand); color: var(--on-accent); border-color: var(--brand); box-shadow: var(--glow-tight); } }

/* Las dos insignias viven en una misma fila: antes eran dos absolutos que
   se montaban uno sobre otro cuando la tarjeta era angosta. */
.card-badges {
  position: absolute; inset: 9px 9px auto 9px; z-index: 1; pointer-events: none;
  display: flex; align-items: flex-start; justify-content: space-between; gap: 6px;
}
.card-badges .badge-avail, .card-badges .badge-offer {
  position: static; top: auto; left: auto; right: auto; min-width: 0; overflow: hidden;
}
/* Tarjeta angosta con las dos insignias: la de disponibilidad se reduce a
   su punto de color, que ya dice el estado, y le deja el ancho a la de
   novedad, que es la que empuja la venta. El umbral sale de medir el peor
   caso ("Pocas uds." junto a "🔥 OFERTA"): 200 px de tarjeta. */
@container card (max-width: 200px) {
  .card-badges:has(.badge-offer) .badge-avail { font-size: 0; gap: 0; padding: 5px; }
}

.badge-avail {
  position: absolute; top: 9px; left: 9px; display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-emph); font-size: 10px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  padding: 5px 9px 5px 8px; border-radius: var(--pill); color: #fff;
  background: rgba(10,10,10,.82); backdrop-filter: blur(6px); border: 1px solid rgba(255,255,255,.14);
}
.badge-avail::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.badge-avail.ok::before   { background: var(--ok); box-shadow: var(--glow-tight); }
.badge-avail.warn::before { background: var(--warn); }
.badge-avail.last::before { background: var(--danger); }

.badge-offer {
  position: absolute; top: 9px; right: 9px; font-family: var(--font-emph);
  font-size: 10px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
  padding: 5px 9px; border-radius: var(--radius-sm); color: var(--on-accent);
  background: var(--brand); box-shadow: var(--glow-tight);
}

.badge-offer.badge-new { background: linear-gradient(135deg, #00e5ff, #3b82f6); color: #041018; box-shadow: 0 0 12px rgba(0,229,255,.4); }
.featured-section .cat-title { color: var(--brand); }
.featured-section .cat-title .count { background: var(--brand); color: var(--on-accent); }
.card-body { padding: 12px 13px 13px; display: flex; flex-direction: column; gap: 7px; flex: 1; }
.card-name { font-family: var(--font-display); font-size: 13.5px; font-weight: 500; line-height: 1.32; color: var(--text); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 36px; }
.card-vol { display: inline-flex; align-self: flex-start; align-items: center; gap: 4px; font-family: var(--font-display); font-size: 10.5px; font-weight: 500; color: var(--brand); background: rgba(50,251,0,.1); padding: 3px 8px; border-radius: var(--pill); }
.card-note { margin-top: 2px; color: var(--text-muted); font: 600 11px/1.4 "Manrope", sans-serif; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.detail-note { margin: 8px 0 0; padding: 8px 12px; border-left: 3px solid var(--brand); border-radius: 8px; background: rgba(50,251,0,.06); color: var(--text-body); font: 600 12.5px/1.5 "Manrope", sans-serif; }
.card-price { font-family: var(--font-emph); font-size: 19px; font-weight: 800; color: var(--text); margin-top: auto; letter-spacing: .01em; padding-top: 2px; }

/* Acciones en dos filas. En una tarjeta de ~140 px los tres botones en
   línea pedían ~200 px: "Pedir" no puede encogerse bajo su propio texto
   y se salía del borde. Arriba los atajos, abajo el botón que vende. */
.card-actions { display: grid; gap: 7px; margin-top: 10px; container: cardactions / inline-size; }
.card-tools { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 7px; }
.btn-add, .btn-piece {
  min-width: 0; height: 36px; padding: 0; border: 1.5px solid var(--line); background: transparent; color: var(--text-body);
  border-radius: var(--radius-md); cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 5px;
  font-family: var(--font-emph); font-size: 11px; font-weight: 700; white-space: nowrap; overflow: hidden;
  transition: .18s var(--ease);
}
.btn-add i, .btn-piece i { font-style: normal; font-size: 15px; line-height: 1; color: var(--brand); }
.btn-add:active, .btn-piece:active { transform: scale(.94); }
@media (hover: hover) {
  .btn-add:hover, .btn-piece:hover { border-color: var(--brand); background: rgba(50,251,0,.1); color: var(--text); }
}
.btn-add.added { background: var(--brand); color: var(--on-accent); border-color: var(--brand); box-shadow: var(--glow-tight); }
.btn-add.added i { color: var(--on-accent); }
/* Tarjeta muy angosta (pantallas pequeñas): los atajos vuelven a ser
   sólo icono antes de que la etiqueta alcance a cortarse. El umbral sale
   de medir el texto: la etiqueta más larga ("Agregar") pide 65 px, o sea
   137 px de fila con las dos columnas y su separación. */
@container cardactions (max-width: 140px) { .btn-add span, .btn-piece span { display: none; } }
@media (max-width: 359px) { .btn-add span, .btn-piece span { display: none; } }
.btn-order {
  width: 100%; height: 42px; border: 0; border-radius: var(--radius-md); background: var(--brand); color: var(--on-accent);
  font-family: var(--font-emph); font-size: 12.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase;
  cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 6px; text-decoration: none;
  transition: .18s var(--ease); box-shadow: var(--glow-tight);
}
@media (hover: hover) { .btn-order:hover { background: var(--brand-hover); box-shadow: var(--glow); transform: translateY(-1px); } }
.btn-order:active { transform: scale(.97); }

/* ===================== EMPTY / ERROR ===================== */
.empty { text-align: center; padding: 56px 24px; color: var(--text-muted); }
.empty-emoji { font-size: 46px; }
.empty-mascot { width: 128px; height: auto; margin: 0 auto 6px; display: block; filter: drop-shadow(0 0 30px rgba(50,251,0,.4)); animation: floatMascot 3s ease-in-out infinite; }
@keyframes floatMascot { 50% { transform: translateY(-8px); } }
.empty-title { font-family: var(--font-emph); text-transform: uppercase; letter-spacing: .04em; font-size: 17px; font-weight: 800; color: var(--text); margin: 12px 0 4px; }
.empty-sub { font-size: 14px; margin: 0 0 16px; }
.btn-ghost { border: 1.5px solid var(--line); background: transparent; color: var(--text); padding: 11px 20px; border-radius: var(--radius-md); font-weight: 700; font-size: 13px; letter-spacing: .03em; text-transform: uppercase; cursor: pointer; font-family: var(--font-emph); }
.btn-ghost.small { padding: 9px 14px; font-size: 12px; }
@media (hover: hover) { .btn-ghost:hover { border-color: var(--brand); color: var(--brand); } }

/* ===================== SKELETON ===================== */
.skeleton { background: var(--card); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); border: 1px solid var(--line-2); }
.skeleton .sk-img { aspect-ratio: 1/1; background: #1e1e1e; }
.skeleton .sk-line { height: 11px; margin: 10px 11px; border-radius: 6px; background: #1e1e1e; }
.skeleton .sk-line.short { width: 50%; }
.skeleton, .skeleton .sk-img, .skeleton .sk-line { animation: shimmer 1.3s infinite; }
@keyframes shimmer { 50% { opacity: .5; } }

/* ===================== FOOTER ===================== */
.app-footer { padding: 40px 18px 36px; text-align: center; }
.footer-card { max-width: 460px; margin: 0 auto; background: var(--surface); border: 1px solid var(--line); color: var(--text-body); border-radius: var(--radius); padding: 30px 24px; box-shadow: var(--glass-hi), var(--shadow); }
.footer-logo { height: 34px; display: inline-flex; }
.footer-logo img { height: 34px; }
.footer-claim { font-family: var(--font-emph); text-transform: uppercase; letter-spacing: .03em; font-size: 15px; font-weight: 700; color: var(--text); margin: 16px 0 6px; }
.footer-mini { font-size: 12.5px; line-height: 1.55; color: var(--text-muted); margin: 0 0 18px; }
.footer-wa { display: inline-flex; align-items: center; gap: 7px; background: var(--brand); color: var(--on-accent); text-decoration: none; padding: 12px 22px; border-radius: var(--pill); font-family: var(--font-emph); font-weight: 800; font-size: 13px; letter-spacing: .04em; text-transform: uppercase; box-shadow: var(--glow); }
.footer-credit { margin: 20px 0 0; font-size: 11px; color: var(--text-faint); text-transform: uppercase; letter-spacing: .06em; }
.footer-credit .credit-name { font-family: var(--font-emph); font-weight: 800; color: var(--brand); }

/* ===================== WHATSAPP FLOTANTE ===================== */
.wa-float { position: fixed; right: 16px; bottom: calc(92px + var(--safe-bottom)); width: 58px; height: 58px; background: var(--brand); color: var(--on-accent); border-radius: 50%; display: grid; place-items: center; box-shadow: var(--glow); z-index: 40; text-decoration: none; transition: transform .15s; animation: floatPulse 2.6s ease-in-out infinite; }
.wa-float:active { transform: scale(.9); }
@keyframes floatPulse { 50% { transform: translateY(-4px); } }

/* ===================== CART BAR ===================== */
.cart-bar { position: fixed; left: 0; right: 0; bottom: 0; padding: 10px 12px calc(10px + var(--safe-bottom)); background: linear-gradient(0deg, var(--bg) 72%, transparent); z-index: 45; }
.cart-open { width: 100%; border: 0; background: var(--brand); color: var(--on-accent); border-radius: var(--radius-md); padding: 16px 18px; font-family: var(--font-emph); font-size: 14px; font-weight: 800; letter-spacing: .03em; text-transform: uppercase; display: flex; align-items: center; gap: 10px; cursor: pointer; box-shadow: var(--glow); animation: cartIn .4s var(--ease); }
@keyframes cartIn { from { transform: translateY(80px); } }
.cart-ico { font-size: 19px; }
.cart-text { font-weight: 700; }
.cart-text strong { font-weight: 800; }
.cart-total { margin-left: auto; font-weight: 800; }
@media (hover: hover) { .cart-open:hover { background: var(--brand-hover); box-shadow: var(--glow-strong); } }

/* ===================== MODAL ===================== */
.modal { position: fixed; inset: 0; z-index: 60; display: flex; align-items: flex-end; justify-content: center; }
.modal-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.66); backdrop-filter: blur(3px); animation: fadeIn .25s; }
@keyframes fadeIn { from { opacity: 0; } }
.modal-sheet { position: relative; width: 100%; max-width: 560px; background: var(--surface); border: 1px solid var(--line); border-bottom: 0; border-radius: 24px 24px 0 0; max-height: 88vh; display: flex; flex-direction: column; animation: slideUp .3s var(--ease); }
@keyframes slideUp { from { transform: translateY(100%); } }
.modal-head { display: flex; align-items: center; justify-content: space-between; padding: 18px 18px 10px; }
.modal-head h2 { margin: 0; font-family: var(--font-emph); text-transform: uppercase; letter-spacing: .03em; font-size: 17px; font-weight: 800; color: var(--text); }
.modal-close { border: 0; background: var(--raised); color: var(--text-muted); width: 32px; height: 32px; border-radius: 50%; font-size: 14px; cursor: pointer; }

.cart-items { overflow-y: auto; padding: 4px 14px; flex: 1; }
.cart-row { display: flex; align-items: center; gap: 10px; background: var(--card); border: 1px solid var(--line-2); border-radius: var(--radius-md); padding: 10px; margin-bottom: 10px; }
.cart-row img { width: 52px; height: 52px; object-fit: contain; border-radius: var(--radius-sm); background: #fff; flex: none; }
.cart-row .cr-fallback { width: 52px; height: 52px; border-radius: var(--radius-sm); background: #fff; display: grid; place-items: center; font-size: 24px; flex: none; }
.cart-row-info { flex: 1; min-width: 0; }
.cart-row-name { font-size: 13px; font-weight: 500; line-height: 1.25; color: var(--text); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cart-row-price { font-size: 12.5px; color: var(--text-muted); font-weight: 600; margin-top: 2px; }
.qty { display: flex; align-items: center; gap: 8px; flex: none; }
.qty button { width: 30px; height: 30px; border-radius: var(--radius-sm); border: 1.5px solid var(--line); background: transparent; color: var(--brand); font-size: 17px; font-weight: 700; cursor: pointer; }
.qty span { min-width: 18px; text-align: center; font-weight: 700; font-size: 14px; color: var(--text); }
.cart-foot { padding: 12px 16px calc(16px + var(--safe-bottom)); background: var(--raised); border-top: 1px solid var(--line); border-radius: 18px 18px 0 0; }
.cart-foot-total { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 12px; color: var(--text-muted); text-transform: uppercase; letter-spacing: .04em; font-size: 12px; font-family: var(--font-emph); }
.cart-foot-total strong { font-size: 22px; font-family: var(--font-emph); color: var(--text); }
.cart-foot-actions { display: flex; gap: 10px; }
.btn-wa { flex: 1; background: var(--brand); color: var(--on-accent); border: 0; border-radius: var(--radius-md); padding: 16px; font-family: var(--font-emph); font-size: 14px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; text-align: center; text-decoration: none; cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: var(--glow-tight); }
.btn-wa:active { background: var(--brand-press); }
.cart-note { font-size: 11px; color: var(--text-faint); text-align: center; margin: 10px 0 0; }
.cart-empty { text-align: center; padding: 40px 20px; color: var(--text-muted); }

/* ===================== FILTROS ===================== */
.filter-body { padding: 6px 18px 4px; overflow-y: auto; }
.filter-group { padding: 16px 0; border-bottom: 1px solid var(--line); }
.filter-group:last-child { border-bottom: 0; }
.filter-label { font-family: var(--font-emph); font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--text); margin-bottom: 13px; }
.filter-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.fchip { border: 1px solid var(--line); background: var(--card); color: var(--text-muted); padding: 9px 15px; border-radius: var(--pill); font-family: var(--font-emph); font-size: 12px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; cursor: pointer; transition: .15s; }
.fchip.active { background: var(--brand); color: var(--on-accent); border-color: transparent; box-shadow: var(--glow-tight); }

.range { position: relative; height: 36px; margin-top: 2px; }
.range-track { position: absolute; top: 15px; left: 0; right: 0; height: 6px; border-radius: var(--pill); background: var(--line-strong); }
.range-fill { position: absolute; height: 100%; border-radius: var(--pill); background: var(--brand); box-shadow: var(--glow-tight); }
.range input[type="range"] { position: absolute; top: 0; left: 0; width: 100%; height: 36px; -webkit-appearance: none; appearance: none; background: transparent; pointer-events: none; margin: 0; }
.range input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; pointer-events: auto; width: 24px; height: 24px; border-radius: 50%; background: var(--brand); border: 3px solid #0a0a0a; box-shadow: var(--glow-tight); cursor: pointer; }
.range input[type="range"]::-moz-range-thumb { pointer-events: auto; width: 24px; height: 24px; border-radius: 50%; background: var(--brand); border: 3px solid #0a0a0a; box-shadow: var(--glow-tight); cursor: pointer; }
.range-vals { display: flex; justify-content: space-between; font-family: var(--font-emph); font-weight: 800; font-size: 15px; margin-top: 10px; color: var(--text); }

.filter-foot { display: flex; gap: 10px; padding: 12px 16px calc(16px + var(--safe-bottom)); background: var(--raised); border-top: 1px solid var(--line); border-radius: 18px 18px 0 0; }
.filter-foot .btn-ghost { flex: 1; }
.filter-foot .btn-wa { flex: 1.4; }

/* ===================== FICHA DEL PRODUCTO ===================== */
.detail-sheet { padding-top: 6px; }
.detail-grab { width: 42px; height: 5px; border-radius: var(--pill); background: rgba(255,255,255,.2); margin: 8px auto 2px; }
.detail-x { position: absolute; top: 12px; right: 14px; z-index: 2; }
.detail-scroll { flex: 1; overflow-y: auto; padding: 10px 18px 6px; }
.detail-img { aspect-ratio: 1/1; max-height: 36vh; margin: 0 auto; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); display: grid; place-items: center; overflow: hidden; cursor: zoom-in; }
.detail-img img { width: 100%; height: 100%; object-fit: contain; padding: 20px; }
.detail-fallback { font-size: 66px; }
.detail-info { padding: 16px 2px 8px; }
.detail-cat { font-family: var(--font-emph); font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--brand); }
.detail-name { font-family: var(--font-display); font-size: 18px; font-weight: 500; line-height: 1.38; margin: 7px 0 13px; color: var(--text); }
.detail-badges { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.detail-badges .badge-avail, .detail-badges .badge-offer { position: static; top: auto; left: auto; right: auto; }
.detail-vol { font-family: var(--font-display); font-size: 12px; font-weight: 500; color: var(--brand); background: rgba(50,251,0,.1); padding: 4px 11px; border-radius: var(--pill); }
.detail-price { font-family: var(--font-emph); font-size: 27px; font-weight: 800; letter-spacing: .01em; margin-top: 14px; color: var(--text); }

.profit { margin-top: 18px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-md); padding: 14px; }
.profit-head { font-family: var(--font-emph); font-size: 12px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--text); margin-bottom: 11px; }
.profit-input { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.profit-cost { font-size: 12.5px; color: var(--text-muted); font-weight: 600; }
.profit-cost b { color: var(--text); }
.profit-input input { flex: 1; min-width: 150px; border: 1.5px solid var(--line); border-radius: var(--radius-sm); padding: 11px 13px; font-size: 16px; font-family: var(--font-emph); font-weight: 700; outline: none; background: var(--input); color: var(--text); }
.profit-input input:focus { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(50,251,0,.14); }
.profit-out { margin-top: 11px; font-size: 14px; font-weight: 600; min-height: 20px; color: var(--text-muted); }
.profit-out.pos, .profit-out.pos strong { color: var(--brand); }
.profit-out.neg, .profit-out.neg strong { color: var(--danger); }

.detail-share { width: 100%; margin-top: 14px; border: 1.5px solid var(--brand); background: transparent; color: var(--brand); border-radius: var(--radius-md); padding: 13px; font-family: var(--font-emph); font-size: 13px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; cursor: pointer; transition: .15s; }
.detail-share:active { transform: scale(.98); }
@media (hover: hover) { .detail-share:hover { background: rgba(50,251,0,.1); box-shadow: var(--glow-tight); } }
.share-opt { display: flex; align-items: center; gap: 10px; margin-top: 12px; cursor: pointer; font-family: var(--font-display); font-size: 13.5px; color: var(--text-body); }
.share-opt input { width: 20px; height: 20px; accent-color: var(--brand); cursor: pointer; flex: none; }
.share-opt b { color: var(--brand); font-weight: 600; }
.share-hint { margin: 8px 0 0; font-size: 11.5px; line-height: 1.5; color: var(--text-faint); }
.share-hint b { color: var(--text-muted); font-weight: 600; }

.detail-media { position: relative; }
.detail-post {
  position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%); width: auto; z-index: 2;
  margin: 0; padding: 11px 20px; border-radius: var(--pill);
  border: 1px solid rgba(50,251,0,.55); background: rgba(10,10,10,.82);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); color: var(--brand);
  font-family: var(--font-emph); font-size: 12px; font-weight: 800; letter-spacing: .03em; text-transform: uppercase;
  cursor: pointer; transition: .15s; box-shadow: 0 8px 22px rgba(0,0,0,.45); white-space: nowrap;
}
.detail-post:active { transform: translateX(-50%) scale(.95); }
@media (hover: hover) { .detail-post:hover { background: var(--brand); color: var(--on-accent); border-color: transparent; box-shadow: var(--glow); } }

/* ===================== GENERADOR DE PUBLICACIÓN ===================== */
.post-body { flex: 1; overflow-y: auto; padding: 12px 16px 6px; }
.post-preview { flex: none; display: flex; justify-content: center; align-items: center; padding: 10px 12px 12px; background: var(--surface); border-bottom: 1px solid var(--line); }
#postCanvas { width: auto; height: auto; max-width: 58%; max-height: 30vh; border-radius: 14px; border: 1px solid var(--line); box-shadow: var(--shadow-lg); }
#postCanvas:focus-visible { outline:3px solid var(--brand); outline-offset:4px; }
.post-tabs { position: sticky; top: 0; z-index: 3; display: flex; gap: 8px; padding: 10px 0 12px; background: rgba(16,16,16,.94); backdrop-filter: saturate(160%) blur(16px); -webkit-backdrop-filter: saturate(160%) blur(16px); box-shadow: 0 8px 16px -8px rgba(0,0,0,.6); }
.post-tab .post-field { padding: 16px 0; border-top: 1px solid rgba(255,255,255,.07); }
.post-tab .post-field:first-child { border-top: 0; padding-top: 8px; }
.post-body, .detail-scroll, .cart-items, .filter-body { overscroll-behavior: contain; }
.post-body { overflow-anchor: none; }
body.no-scroll { overflow: hidden; }
.post-tab-btn { flex: 1; border: 1px solid var(--line); background: var(--raised); color: var(--text-muted); padding: 11px 6px; border-radius: var(--radius-sm); font-family: var(--font-emph); font-size: 11.5px; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; cursor: pointer; transition: .15s; }
.post-tab-btn.active { background: var(--brand); color: var(--on-accent); border-color: transparent; box-shadow: var(--glow-tight); }
.post-tab { display: none; }
.post-tab.active { display: block; }
.acc-head { width: 100%; display: flex; align-items: center; justify-content: space-between; background: transparent; border: 0; border-top: 1px solid rgba(255,255,255,.07); color: var(--text); font-family: var(--font-emph); font-size: 13px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; padding: 17px 2px; cursor: pointer; }
.acc-ico { color: var(--brand); font-size: 15px; transition: transform .2s var(--ease); }
.acc.open > .acc-head .acc-ico { transform: rotate(180deg); }
.acc-body { display: none; padding-bottom: 4px; }
.acc.open > .acc-body { display: block; }
.acc-body .post-field:first-child { border-top: 0; padding-top: 6px; }
.post-badges { display: flex; flex-wrap: wrap; gap: 8px; }
.style-presets { display: flex; flex-wrap: wrap; gap: 8px; }
.preset-chip { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--line); background: var(--raised); color: var(--text); padding: 10px 15px; border-radius: var(--pill); font-family: var(--font-emph); font-size: 12.5px; font-weight: 700; cursor: pointer; transition: .15s; }
.preset-chip i { width: 13px; height: 13px; border-radius: 50%; box-shadow: 0 0 8px currentColor; }
.preset-chip:active { transform: scale(.95); }
@media (hover: hover) { .preset-chip:hover { border-color: var(--brand); } }
.label-btn { float: right; border: 0; background: transparent; color: var(--brand); font-family: var(--font-display); font-size: 12px; font-weight: 600; cursor: pointer; text-transform: none; letter-spacing: 0; padding: 0; margin-left: 14px; }
.preset-chip.saved { padding-right: 10px; gap: 6px; }
.preset-x { opacity: .55; cursor: pointer; font-size: 11px; padding: 0 2px; }
.preset-x:hover { opacity: 1; }
.post-emojis { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.emoji-btn { border: 1px solid var(--line); background: var(--raised); border-radius: 10px; width: 42px; height: 42px; font-size: 20px; cursor: pointer; display: grid; place-items: center; transition: .12s; }
.emoji-btn:active { transform: scale(.9); }
@media (hover: hover) { .emoji-btn:hover { border-color: var(--brand); } }
.badge-chip { border: 1px solid var(--line); background: var(--raised); color: var(--text-muted); padding: 9px 13px; border-radius: var(--pill); font-family: var(--font-emph); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .02em; cursor: pointer; transition: .15s; }
.badge-chip.active { background: var(--brand); color: var(--on-accent); border-color: transparent; box-shadow: var(--glow-tight); }
.post-formats { display: flex; gap: 8px; }
.post-fmt { flex: 1; border: 1px solid var(--line); background: var(--raised); color: var(--text-muted); padding: 10px 8px; border-radius: var(--radius-sm); font-family: var(--font-emph); font-size: 12px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; cursor: pointer; transition: .15s; }
.post-fmt.active { background: var(--brand); color: var(--on-accent); border-color: transparent; box-shadow: var(--glow-tight); }
.post-swatches { display: flex; flex-wrap: wrap; gap: 10px; }
.post-sw { width: 34px; height: 34px; border-radius: 50%; border: 2px solid var(--line); background: var(--c); cursor: pointer; padding: 0; transition: .15s; }
.post-sw.active { border-color: #fff; box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--c); }
.post-sw-custom { display: grid; place-items: center; overflow: hidden; border-color: transparent;
  background: conic-gradient(from 0deg, #ff3b30, #ff8c00, #ffd21f, #32fb00, #00e5ff, #3b82f6, #8b5cf6, #ec4899, #ff3b30); }
.post-sw-custom input { opacity: 0; width: 200%; height: 200%; cursor: pointer; border: 0; }
.post-sw.text-auto { display: grid; place-items: center; background: var(--raised); color: var(--text); font-family: var(--font-emph); font-weight: 800; font-size: 14px; }
.post-controls { display: flex; flex-direction: column; gap: 18px; }
.post-label { font-family: var(--font-emph); font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--text); margin-bottom: 10px; }
.post-logo-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.post-logo-thumb { width: 66px; height: 42px; border: 1px solid var(--line); border-radius: 8px; display: grid; place-items: center; background: #0f0f0f; font-size: 9.5px; color: var(--text-faint); overflow: hidden; flex: none; }
.post-logo-thumb img { max-width: 100%; max-height: 100%; display: block; }
.post-file { position: relative; overflow: hidden; cursor: pointer; display: inline-flex; align-items: center; }
.post-input { width: 100%; background: var(--input); border: 1.5px solid var(--line); border-radius: 10px; padding: 12px 13px; color: var(--text); font-family: var(--font-display); font-size: 15px; outline: none; }
.post-input:focus { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(50,251,0,.14); }
textarea.post-input { resize: vertical; line-height: 1.4; min-height: 80px; }
.post-select { appearance: none; -webkit-appearance: none; padding-right: 36px; cursor: pointer;
  background-repeat: no-repeat; background-position: right 12px center;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2332fb00' stroke-width='3' stroke-linecap='round'><path d='M6 9l6 6 6-6'/></svg>"); }
.post-presets { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.post-preset { border: 1px solid var(--line); background: var(--raised); color: var(--text-body); padding: 8px 12px; border-radius: var(--pill); font-family: var(--font-display); font-size: 12.5px; font-weight: 500; cursor: pointer; transition: .15s; }
@media (hover: hover) { .post-preset:hover { border-color: var(--brand); color: var(--brand); } }
.post-hint { margin: 8px 0 0; font-size: 11.5px; line-height: 1.5; color: var(--text-faint); }
.post-hint b { color: var(--text-muted); font-weight: 600; }
.post-logo-opts { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
.combo { position: relative; }
.combo-results { position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 5; background: var(--raised); border: 1px solid var(--line); border-radius: 12px; max-height: 240px; overflow-y: auto; overscroll-behavior: contain; box-shadow: var(--shadow-lg); }
.combo-item { display:flex; align-items:center; gap:10px; width:100%; padding:11px 12px; border:0; border-bottom:1px solid var(--line-2); background:transparent; font:inherit; text-align:left; cursor:pointer; }
.combo-item:last-child { border-bottom: 0; }
.combo-item.active, .combo-item:hover { background: rgba(50,251,0,.1); }
.combo-item-name { flex: 1; min-width: 0; font-size: 13px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.combo-item-price { font-family: var(--font-emph); font-weight: 700; font-size: 12px; color: var(--brand); }
.combo-empty { padding: 12px; font-size: 12.5px; color: var(--text-faint); }
.offer-list { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.offer-chip { display: flex; align-items: center; gap: 10px; background: var(--raised); border: 1px solid var(--line); border-radius: 12px; padding: 9px 12px; }
.offer-chip-name { flex: 1; min-width: 0; font-size: 13px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.offer-chip-price { font-family: var(--font-emph); font-weight: 700; font-size: 12.5px; color: var(--brand); }
.offer-chip-x { border: 0; background: rgba(255,255,255,.08); color: var(--text-muted); width: 26px; height: 26px; border-radius: 50%; font-size: 13px; cursor: pointer; flex: none; }
.offer-empty { font-size: 12px; color: var(--text-faint); }
.post-photo-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 10px; }
.post-foot { display: flex; gap: 8px; padding: 9px 14px calc(9px + var(--safe-bottom)); background: var(--raised); border-top: 1px solid var(--line); border-radius: 18px 18px 0 0; }
.post-foot .btn-ghost { flex: 1; }
.post-foot .btn-wa { flex: 1.25; }
/* Pie compacto: los botones no roban espacio a la personalización */
.post-foot .btn-ghost, .post-foot .btn-wa { padding: 10px 8px; font-size: 12px; letter-spacing: .02em; }

/* Estudio en móvil: aprovecha casi toda la pantalla (sube el título + preview) */
.post-sheet { max-height: 94vh; max-height: 94dvh; }
.post-sheet .post-preview { padding: 8px 12px 10px; }
.post-sheet #postCanvas { max-width: 62%; max-height: 33vh; }

.detail-foot { display: flex; gap: 10px; padding: 12px 16px calc(16px + var(--safe-bottom)); background: var(--raised); border-top: 1px solid var(--line); border-radius: 18px 18px 0 0; }
.detail-foot .btn-ghost { flex: 1; }
.detail-foot .btn-wa { flex: 1.2; }

/* ===================== TOAST ===================== */
.toast { position: fixed; left: 50%; bottom: calc(112px + var(--safe-bottom)); transform: translateX(-50%) translateY(20px); background: var(--raised); color: var(--text); border: 1px solid var(--brand); padding: 11px 18px; border-radius: var(--pill); font-family: var(--font-emph); font-size: 12.5px; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; box-shadow: var(--glow-tight); opacity: 0; pointer-events: none; z-index: 90; transition: .3s var(--ease); max-width: 86vw; text-align: center; }
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ===================== LIGHTBOX ===================== */
.lightbox { position: fixed; inset: 0; background: rgba(0,0,0,.94); z-index: 80; display: grid; place-items: center; padding: 24px; animation: fadeIn .25s; }
.lightbox img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: var(--radius-md); }

/* ===================== ESCRITORIO (modales centrados + estudio a pantalla) ===================== */
@keyframes popIn { from { opacity: 0; transform: translateY(14px) scale(.985); } }

@media (min-width: 840px) {
  /* Todos los pop-ups: centrados como diálogo, no pegados abajo */
  .modal { align-items: center; padding: 32px; }
  .modal-sheet {
    border: 1px solid var(--line); border-radius: 22px; overflow: hidden;
    max-height: 90vh; animation: popIn .26s var(--ease);
  }
  .modal-sheet .cart-foot,
  .modal-sheet .filter-foot,
  .modal-sheet .detail-foot,
  .modal-sheet .post-foot { border-radius: 0; }

  /* ===== FICHA DE PRODUCTO: dos columnas, todo a la vista (sin scroll) ===== */
  .detail-sheet { width: min(1000px, 94vw); max-width: none; }
  .detail-grab { display: none; }
  .detail-scroll {
    display: grid; grid-template-columns: minmax(0, 0.92fr) minmax(0, 1fr);
    gap: 30px; align-items: start; padding: 30px 30px 6px;
  }
  .detail-media { position: sticky; top: 30px; }
  .detail-img { max-height: none; height: auto; width: 100%; }
  .detail-post { bottom: 16px; padding: 12px 22px; font-size: 13px; }
  .detail-info { padding: 4px 0 0; }
  .detail-name { font-size: 22px; margin-top: 8px; }
  .detail-price { font-size: 30px; }

  /* ===== ESTUDIO: dos columnas, preview grande + controles ===== */
  .post-sheet {
    display: grid; max-width: none;
    width: min(1180px, 95vw); height: min(900px, 90vh); max-height: 90vh;
    grid-template-columns: minmax(0, 1fr) minmax(390px, 460px);
    grid-template-rows: auto minmax(0, 1fr) auto;
    grid-template-areas: "preview head" "preview body" "preview foot";
  }
  .post-sheet .modal-head { grid-area: head; padding: 20px 20px 14px; border-bottom: 1px solid var(--line); }
  .post-sheet .post-preview {
    grid-area: preview; height: auto; max-height: none; min-height: 0; padding: 32px;
    border-bottom: 0; border-right: 1px solid var(--line);
    background: radial-gradient(120% 90% at 50% 0%, rgba(50,251,0,.06), transparent 60%), var(--bg);
  }
  .post-sheet #postCanvas { max-width: 100%; max-height: 100%; width: auto; height: auto; }
  .post-sheet .post-body { grid-area: body; padding: 4px 20px 8px; }
  .post-sheet .post-foot { grid-area: foot; border-top: 1px solid var(--line); padding: 12px 20px; }
  /* Las pestañas quedan pegadas arriba del panel derecho (barra a todo el ancho) */
  .post-sheet .post-tabs { top: 0; margin: 0 -20px; padding: 12px 20px; }
}

@media (min-width: 840px) and (hover: hover) {
  .modal-close:hover { background: var(--line); color: var(--text); }
}

/* ===================== HERRAMIENTAS PARA VENDER MÁS ===================== */
/* Bloque del hero: agrupa las herramientas y explica que son para vender */
.hero-tools {
  margin: 22px auto 0; max-width: 420px; padding: 20px 18px 18px;
  background: var(--raised); border: 1px solid var(--line); border-radius: var(--radius-lg);
  display: flex; flex-direction: column; gap: 10px;
}
.hero-tools-title {
  font-family: var(--font-emph); font-weight: 800; font-size: 14px;
  letter-spacing: .06em; text-transform: uppercase; color: var(--brand); margin: 0;
}
.hero-tools-sub {
  font-family: var(--font-display); font-size: 13px; line-height: 1.55;
  color: var(--text-muted); margin: 0 0 6px;
}
.hero-tools-sub b { color: var(--text); font-weight: 600; }
.hero-tools .hero-studio { margin-top: 0; width: 100%; justify-content: center; }
.hero-tools .hero-share { margin-top: 0; width: 100%; justify-content: center; }

/* Nota "para ti que revendes" en la ficha del producto */
.seller-note {
  margin: 16px 0 4px; padding: 11px 13px;
  background: rgba(50,251,0,.06); border: 1px solid rgba(50,251,0,.28); border-radius: var(--radius-md);
  font-family: var(--font-display); font-size: 12.5px; line-height: 1.55; color: var(--text-body);
}
.seller-note b { color: var(--brand); font-weight: 600; }

/* Botón secundario de frases en la ficha */
.detail-scripts { margin-top: 12px; }

/* Botón "copiar texto" del estudio (fila completa sobre los demás) */
.post-foot { flex-wrap: wrap; }
.post-foot .post-caption-btn { flex: 1 1 100%; justify-content: center; }

/* ===== Modal: frases que cierran ventas ===== */
.sales-sheet { max-width: 560px; }
.sales-body { padding: 4px 18px calc(24px + var(--safe-bottom)); overflow-y: auto; }
.sales-intro { color: var(--text-muted); font-size: 13.5px; line-height: 1.55; margin: 6px 2px 4px; }
.sales-intro b { color: var(--brand); }
.sales-intro-tip { display: inline-block; margin-top: 6px; font-size: 12px; color: var(--text-faint); }
.sales-ctx {
  margin: 12px 0 0; padding: 9px 13px; border-radius: var(--pill); width: fit-content; max-width: 100%;
  background: rgba(50,251,0,.08); border: 1px solid rgba(50,251,0,.35);
  font-family: var(--font-display); font-size: 12.5px; color: var(--text-body);
}
.sales-ctx b { color: var(--brand); font-weight: 600; }
.sales-group { margin-top: 22px; }
.sales-group-title {
  font-family: var(--font-emph); font-weight: 800; font-size: 13px;
  letter-spacing: .04em; text-transform: uppercase; color: var(--text);
}
.sales-tip { margin: 6px 0 2px; font-size: 12px; line-height: 1.5; color: var(--text-faint); }
.sales-card {
  display: block; width: 100%; text-align: left; margin-top: 10px; padding: 13px 14px 11px;
  background: var(--raised); border: 1px solid var(--line); border-radius: var(--radius-md);
  cursor: pointer; transition: border-color .15s var(--ease), box-shadow .15s var(--ease), transform .1s var(--ease);
}
.sales-card:active { transform: scale(.985); }
@media (hover: hover) { .sales-card:hover { border-color: var(--brand); box-shadow: var(--glow-tight); } }
.sales-card-title {
  display: block; font-family: var(--font-emph); font-weight: 800; font-size: 12px;
  letter-spacing: .03em; text-transform: uppercase; color: var(--brand); margin-bottom: 7px;
}
.sales-card-msg {
  display: block; white-space: pre-wrap; font-family: var(--font-display);
  font-size: 13.5px; line-height: 1.5; color: var(--text-body);
}
.sales-copy {
  display: inline-block; margin-top: 10px; padding: 5px 11px; border-radius: var(--pill);
  background: transparent; border: 1px solid var(--line);
  font-family: var(--font-emph); font-weight: 700; font-size: 10.5px;
  letter-spacing: .06em; text-transform: uppercase; color: var(--text-faint);
}
@media (hover: hover) { .sales-card:hover .sales-copy { border-color: var(--brand); color: var(--brand); } }

/* ===================== ESTUDIO: CONTROLES CÓMODOS EN EL CELULAR ===================== */
/* Objetivos táctiles más grandes (mínimo ~44px de alto) en todo el estudio */
.post-fmt { padding: 12px 8px; min-height: 44px; }
.post-tab-btn { padding: 12px 6px; min-height: 44px; }
.badge-chip { padding: 11px 15px; min-height: 42px; }
.preset-chip { padding: 11px 16px; min-height: 42px; }
.post-sw { width: 38px; height: 38px; }
.emoji-btn { min-width: 42px; min-height: 42px; font-size: 20px; }

/* 16px evita que iOS haga zoom automático al tocar un campo de texto */
.post-input, #profitSell { font-size: 16px; }

/* El preview se puede tocar para verlo en grande */
#postCanvas { cursor: zoom-in; }

/* En pantallas de celular, las filas de chips no se apilan en varias líneas:
   se vuelven UNA fila deslizable (como los chips de categorías del catálogo).
   Menos alto ocupado, más fácil de recorrer con el pulgar. */
@media (max-width: 839px) {
  .style-presets, .post-badges, .post-swatches, .post-emojis {
    flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch;
    scrollbar-width: none; margin: 0 -16px; padding: 4px 16px 8px;
  }
  .style-presets::-webkit-scrollbar, .post-badges::-webkit-scrollbar,
  .post-swatches::-webkit-scrollbar, .post-emojis::-webkit-scrollbar { display: none; }
  .style-presets > *, .post-badges > *, .post-swatches > *, .post-emojis > * { flex: none; }
  .post-sw { width: 42px; height: 42px; }
}

/* ===================== ESTUDIO PRO ===================== */
/* Filtros de la biblioteca de presets (fila deslizable) */
.preset-filters { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin: 0 -16px 12px; padding: 0 16px 2px; }
.preset-filters::-webkit-scrollbar { display: none; }
.preset-filters .fchip { flex: none; }

/* Biblioteca de presets como tarjetas visuales */
.preset-lib { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.lib-card {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 12px 6px; border: 1px solid var(--line); border-radius: var(--radius-md);
  background: var(--raised); color: var(--text); cursor: pointer; transition: .15s; min-height: 92px; justify-content: center;
}
.lib-card:active { transform: scale(.96); }
@media (hover: hover) { .lib-card:hover { border-color: var(--brand); box-shadow: var(--glow-tight); } }
.lib-ico { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; font-size: 22px; }
.lib-name { font-family: var(--font-display); font-size: 11.5px; font-weight: 600; text-align: center; line-height: 1.2; color: var(--text-body); }

/* Fila de tonos del generador de texto */
.tone-row { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 10px; }
.tone-row .fchip { padding: 8px 12px; }

/* Menú de descarga (PNG / JPG) sobre el botón Descargar */
.dl-wrap { position: relative; flex: 1; display: flex; }
.dl-wrap > .btn-ghost { flex: 1; }
.dl-menu {
  position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%);
  display: flex; flex-direction: column; gap: 4px; padding: 6px;
  background: var(--raised); border: 1px solid var(--line); border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg); z-index: 6; min-width: 200px;
}
.dl-menu button {
  border: 0; background: transparent; color: var(--text); text-align: left;
  padding: 11px 12px; border-radius: var(--radius-sm); font-family: var(--font-display); font-size: 14px; cursor: pointer;
}
@media (hover: hover) { .dl-menu button:hover { background: rgba(50,251,0,.1); color: var(--brand); } }

/* Progreso de video */
.video-progress { margin-top: 12px; }
.video-bar-track { height: 8px; background: var(--input); border-radius: 4px; overflow: hidden; }
.video-bar { height: 100%; width: 0; background: var(--brand); box-shadow: var(--glow-tight); transition: width .1s linear; }
.video-progress-row { display: flex; align-items: center; justify-content: space-between; margin-top: 8px; }
.video-pct { font-family: var(--font-emph); font-weight: 800; font-size: 13px; color: var(--brand); }

/* Botones grandes/táctiles también para las nuevas filas en celular */
@media (max-width: 839px) {
  .preset-filters, .tone-row { flex-wrap: nowrap; }
  .tone-row { overflow-x: auto; scrollbar-width: none; margin: 10px -16px 0; padding: 0 16px 4px; }
  .tone-row::-webkit-scrollbar { display: none; }
  .tone-row .fchip { flex: none; }
}
@media (min-width: 840px) {
  .preset-lib { grid-template-columns: repeat(4, 1fr); }
}

/* ===================== NOVEDADES + MI NEGOCIO + TIENDA ===================== */
/* Toggle de novedades activo + su contador */
.mini-toggle.active { border-color: var(--brand); color: var(--brand); box-shadow: var(--glow-tight); }
.nov-count { display: inline-grid; place-items: center; min-width: 17px; height: 17px; padding: 0 4px; margin-left: 4px; border-radius: 9px; background: var(--brand); color: var(--on-accent); font-size: 10.5px; font-weight: 800; }

/* Badge "bajó de precio" + precio anterior tachado en la tarjeta */
.badge-drop { background: #ff8c00 !important; color: #1a0f00 !important; }
.card-oldprice { color: var(--text-faint); font-weight: 500; font-size: .78em; margin-left: 6px; }

/* Banner de la tienda del vendedor (modo tienda) */
/* ===== Tienda: identidad centrada y simétrica =====
   Logo flotante (PNG sin caja), nombre gigante en bold centrado,
   lema y métricas alineados en el mismo eje. */
.store-banner { display: none; }
body.storefront .store-banner { display: flex; flex-direction: column; align-items: center; gap: 14px; margin: 18px auto 6px; }
.store-cover { width: 100%; max-width: 820px; max-height: 240px; object-fit: cover; border-radius: 22px; box-shadow: 0 18px 44px rgba(0,0,0,.28); }
.store-banner-logo {
  width: auto; height: 112px; max-width: min(340px, 72vw); flex: none; object-fit: contain;
  filter: drop-shadow(0 14px 30px rgba(0,0,0,.22));
}
body.storefront .hero-inner { display: block; max-width: 860px; }
body.storefront .hero-copy { display: flex; flex-direction: column; align-items: center; text-align: center; }
body.storefront .hero-brandrow { justify-content: center; }
body.storefront .hero-title { font-size: clamp(40px, 8vw, 78px); font-weight: 800; overflow-wrap: anywhere; margin-left: auto; margin-right: auto; max-width: none; }
body.storefront .hero-tagline { margin-left: auto; margin-right: auto; }
body.storefront .hero-support { justify-content: center; margin-left: auto; margin-right: auto; }
body.storefront .hero-stats { justify-content: center; }
body.storefront .hero-enter { margin: 0 auto; }

/* El banner de la comunidad es clave y va arriba SIEMPRE — hasta que la
   persona entre al grupo (toca cualquier enlace de la comunidad y este
   dispositivo deja de recordárselo). */
body.joined-community .community-invite { display: none; }
body.member .community-invite { margin-bottom: 18px; }

/* En modo tienda ocultamos todo lo que es del vendedor / MR MOBILE */
body.storefront .hero-tools,
body.storefront .community-invite,
body.storefront .brand-logo,
body.storefront .mini-logo,
body.storefront .footer-logo,
body.storefront #studioBtn,
body.storefront .seller-note,
body.storefront .detail-post,
body.storefront .detail-scripts,
body.storefront .profit,
body.storefront .footer-credit,
body.storefront .card-vol { display: none !important; }

/* Modal Mi negocio */
.biz-sheet { max-width: 480px; }
.biz-body { padding: 4px 20px calc(24px + var(--safe-bottom)); overflow-y: auto; }
.biz-intro { color: var(--text-muted); font-size: 13.5px; line-height: 1.55; margin: 6px 0 4px; }
.biz-intro b { color: var(--brand); }
.biz-field { padding: 16px 0; border-top: 1px solid rgba(255,255,255,.07); }
.biz-field:first-of-type { border-top: 0; }
.biz-label { font-family: var(--font-emph); font-size: 12px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--text); margin-bottom: 12px; }
.biz-hint { font-size: 12px; line-height: 1.5; color: var(--text-faint); margin: 10px 0 0; }
.biz-hint b { color: var(--brand); font-weight: 600; }
.biz-margin-row { display: flex; align-items: center; gap: 14px; }
.biz-margin-row input[type="range"] { flex: 1; accent-color: var(--brand); height: 26px; }
.biz-margin-val { font-family: var(--font-emph); font-weight: 800; font-size: 20px; color: var(--brand); min-width: 62px; text-align: right; }
.biz-store { border-top: 1px solid var(--brand); margin-top: 6px; }
.biz-store .qr-card { margin: 12px auto; padding: 16px; }
.biz-store .qr-canvas-wrap canvas { width: 200px; height: 200px; }

/* ===================== EXPERIENCIA DE VENTA V2 ===================== */
/* Hero horizontal: el catálogo y las herramientas comparten el primer pantallazo. */
.hero { padding: 26px 20px 38px; text-align: left; }
.hero-inner { max-width: var(--maxw); display: grid; grid-template-columns: minmax(0, 1.03fr) minmax(390px, .97fr); column-gap: clamp(28px, 5vw, 70px); row-gap: 28px; align-items: center; }
.community-invite {
  grid-column: 1 / -1; position: relative; overflow: hidden;
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 18px;
  padding: 16px 18px; border: 1px solid rgba(50,251,0,.48); border-radius: 18px;
  background: linear-gradient(105deg, rgba(50,251,0,.18), rgba(50,251,0,.045) 46%, rgba(20,20,20,.9));
  color: var(--text); text-decoration: none; box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 12px 40px rgba(0,0,0,.28);
  transition: transform .18s var(--ease), border-color .18s, box-shadow .18s;
}
.community-invite::after { content: ""; position: absolute; width: 180px; height: 180px; right: 12%; top: -120px; border-radius: 50%; background: var(--brand); filter: blur(55px); opacity: .2; pointer-events: none; }
.community-invite-icon { position: relative; z-index: 1; width: 48px; height: 48px; border-radius: 15px; display: grid; place-items: center; background: var(--brand); color: var(--on-accent); font-size: 23px; box-shadow: var(--glow-tight); }
.community-invite-copy { position: relative; z-index: 1; min-width: 0; display: grid; gap: 3px; }
.community-invite-copy small { color: var(--brand); font: 750 10px/1.2 "Manrope", sans-serif; letter-spacing: .14em; text-transform: uppercase; }
.community-invite-copy strong { color: var(--text); font: 760 clamp(18px, 2vw, 24px)/1.15 "Sora", sans-serif; letter-spacing: -.025em; }
.community-invite-copy > span { color: var(--text-muted); font: 500 12.5px/1.4 "Manrope", sans-serif; }
.community-invite-action { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 10px; white-space: nowrap; padding: 12px 16px; border-radius: var(--pill); background: var(--brand); color: var(--on-accent); font: 800 11px/1 "Manrope", sans-serif; letter-spacing: .035em; text-transform: uppercase; box-shadow: var(--glow-tight); }
.community-invite-action b { font-size: 18px; line-height: .5; }
.community-invite:active { transform: scale(.985); }
@media (hover: hover) { .community-invite:hover { transform: translateY(-2px); border-color: var(--brand); box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 16px 44px rgba(0,0,0,.36), var(--glow-tight); } }
.hero-copy { min-width: 0; }
.hero-brandrow { justify-content: flex-start; margin-bottom: 18px; }
.hero-title { font-size: clamp(54px, 6.2vw, 88px); margin: 2px 0 14px; max-width: 650px; }
.hero-title .grad { display: inline; }
.hero-tagline { max-width: 600px; margin: 0 0 12px; font-family: "Sora", var(--font-emph); font-size: clamp(17px, 2vw, 24px); text-transform: none; letter-spacing: -.02em; }
.hero-support { justify-content: flex-start; max-width: 600px; margin: 0 0 20px; }
.hero-stats { justify-content: flex-start; margin-bottom: 18px; }
.stat { flex: 0 1 126px; padding: 11px 8px; text-align: center; }
.stat-num { font-size: 25px; }
.hero-enter { margin: 0; }
.hero-tools { margin: 0; max-width: none; padding: 24px; gap: 9px; background: rgba(20,20,20,.82); backdrop-filter: blur(18px); }
.hero-tools-kicker { font: 750 11px/1 "Manrope", sans-serif; letter-spacing: .15em; text-transform: uppercase; color: var(--brand); }
.hero-tools-title { color: var(--text); font: 750 clamp(20px, 2vw, 27px)/1.12 "Sora", sans-serif; text-transform: none; letter-spacing: -.03em; }
.hero-tools-sub { max-width: 490px; margin-bottom: 8px; }
.hero-tool-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.hero-tools .hero-studio, .hero-tools .hero-share { min-width: 0; min-height: 92px; width: 100%; margin: 0; padding: 13px; border-radius: 14px; align-items: flex-start; justify-content: center; flex-direction: column; gap: 3px; text-align: left; text-transform: none; letter-spacing: 0; }
.hero-tools .hero-studio span, .hero-tools .hero-share span { font-size: 21px; line-height: 1; }
.hero-tools .hero-studio b, .hero-tools .hero-share b { font: 750 14px/1.2 "Manrope", sans-serif; }
.hero-tools .hero-studio small, .hero-tools .hero-share small { font: 500 11px/1.25 "Manrope", sans-serif; opacity: .65; }
.hero-install { grid-column: 1 / -1; }

/* Asistente de configuración de tienda. */
.biz-sheet { max-width: 610px; }
.biz-body { position: relative; }
.biz-progress { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin: 14px 0 8px; }
.biz-step-dot { min-width: 0; border: 0; background: transparent; color: var(--text-faint); font: 650 10px/1.2 "Manrope", sans-serif; cursor: pointer; display: grid; justify-items: center; gap: 6px; }
.biz-step-dot span { display: grid; place-items: center; width: 29px; height: 29px; border-radius: 50%; background: var(--raised); border: 1px solid var(--line); color: var(--text-muted); }
.biz-step-dot.active, .biz-step-dot.done { color: var(--text); }
.biz-step-dot.active span { background: var(--brand); border-color: var(--brand); color: #000; box-shadow: var(--glow-tight); }
.biz-step-dot.done span { border-color: var(--brand); color: var(--brand); }
.biz-step { display: none; min-height: 330px; padding-top: 10px; }
.biz-step.active { display: block; animation: bizIn .24s var(--ease); }
@keyframes bizIn { from { opacity: 0; transform: translateX(12px); } }
.biz-step-title { margin: 10px 0 4px; color: var(--text); font: 750 21px/1.2 "Sora", sans-serif; letter-spacing: -.025em; }
.biz-preview { margin: 14px 0; min-height: 155px; border-radius: 18px; padding: 22px; display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden; position: relative; border: 1px solid var(--line); }
.biz-preview::before { content: ""; position: absolute; width: 170px; height: 170px; right: -45px; top: -70px; border-radius: 50%; background: var(--biz-accent, var(--brand)); filter: blur(45px); opacity: .3; }
.biz-preview strong, .biz-preview span { position: relative; z-index: 1; }
.biz-preview strong { color: var(--biz-ink, #fff); font: 800 25px/1.15 "Sora", sans-serif; }
.biz-preview span { color: var(--biz-muted, rgba(255,255,255,.6)); font: 500 13px/1.45 "Manrope", sans-serif; margin-top: 5px; }
.biz-nav { position: sticky; bottom: 0; display: flex; gap: 10px; padding: 14px 0 2px; background: linear-gradient(transparent, var(--surface) 22%); z-index: 2; }
.biz-nav > * { flex: 1; justify-content: center; }

@media (max-width: 839px) {
  .hero { padding: 20px 16px 30px; }
  .hero-inner { display: block; }
  .community-invite { margin-bottom: 14px; grid-template-columns: auto minmax(0, 1fr); gap: 12px; padding: 15px; text-align: left; }
  .community-invite-icon { width: 44px; height: 44px; border-radius: 13px; font-size: 21px; }
  .community-invite-copy strong { font-size: 17px; }
  .community-invite-copy > span { font-size: 11.5px; }
  .community-invite-action { grid-column: 1 / -1; justify-content: center; padding: 13px 16px; }
  .hero-brandrow { justify-content: center; margin-bottom: 14px; }
  .hero-copy { text-align: center; }
  .hero-title { font-size: clamp(42px, 12vw, 58px); margin-bottom: 7px; }
  .hero-title .grad { display: inline; }
  .hero-tagline { font-size: 16px; margin: 0 auto 9px; }
  .hero-support { display: none; }
  .hero-stats { margin-bottom: 14px; }
  .stat { padding: 9px 5px; }
  .stat-num { font-size: 22px; }
  .stat-label { font-size: 8.5px; letter-spacing: .1em; }
  .hero-tools { margin-top: 14px; padding: 17px; text-align: left; }
  .hero-tools-title { font-size: 19px; }
  .hero-tools-sub { font-size: 12.5px; line-height: 1.45; }
  .hero-tools .hero-studio, .hero-tools .hero-share { min-height: 82px; padding: 11px; }
  .install-card { grid-template-columns:auto minmax(0,1fr); padding:11px; }
  .install-card button { grid-column:1 / -1; width:100%; min-height:40px; }
  .notification-card { grid-template-columns:auto minmax(0,1fr); padding:11px; }
  .notification-card button { grid-column:1 / -1; width:100%; min-height:40px; }
  .biz-intro { margin-top: 2px; }
  .biz-step { min-height: 350px; }
  .biz-step-dot { font-size: 9px; }
}

/* ===================== FAVORITOS (VITRINA) + RELACIONADOS ===================== */
/* Estrella de vitrina en la tarjeta */
.card-fav {
  /* La esquina superior derecha pertenece a NUEVO/OFERTA. Favoritos usa
     la esquina inferior izquierda, simétrica al botón de ampliar. */
  position: absolute; bottom: 8px; left: 8px; z-index: 2;
  width: 34px; height: 34px; border-radius: 50%; border: 0; cursor: pointer;
  background: rgba(0,0,0,.42); color: #ffd21f; font-size: 17px; line-height: 34px;
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); transition: transform .12s, background .15s;
}
.card-fav:active { transform: scale(.85); }
.card-fav.on { background: rgba(255,210,31,.18); }
@media (hover: hover) { .card-fav:hover { background: rgba(0,0,0,.6); } }

/* Bloque "Complétalo con…" en la ficha */
.detail-related { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); }
.detail-related-title { font-family: var(--font-emph); font-weight: 800; font-size: 14px; letter-spacing: .03em; text-transform: uppercase; color: var(--text); margin-bottom: 12px; }
.related-row { display: flex; gap: 12px; overflow-x: auto; scrollbar-width: none; padding-bottom: 6px; margin: 0 -4px; padding-left: 4px; padding-right: 4px; }
.related-row::-webkit-scrollbar { display: none; }
.rel-card { flex: none; width: 132px; background: var(--raised); border: 1px solid var(--line); border-radius: var(--radius-md); padding: 10px; cursor: pointer; transition: border-color .15s; display: flex; flex-direction: column; }
@media (hover: hover) { .rel-card:hover { border-color: var(--brand); } }
.rel-img { height: 92px; border-radius: 10px; background: #fff; display: grid; place-items: center; overflow: hidden; margin-bottom: 8px; }
.rel-img img { width: 100%; height: 100%; object-fit: contain; }
.rel-fallback { font-size: 40px; }
.rel-name { font-family: var(--font-display); font-size: 12px; line-height: 1.25; color: var(--text-body); height: 30px; overflow: hidden; }
.rel-price { font-family: var(--font-emph); font-weight: 800; font-size: 14px; color: var(--brand); margin: 6px 0 8px; }
.rel-add { margin-top: auto; border: 1px solid var(--brand); background: transparent; color: var(--brand); border-radius: var(--radius-sm); padding: 7px 4px; font-family: var(--font-emph); font-weight: 700; font-size: 11px; letter-spacing: .02em; text-transform: uppercase; cursor: pointer; transition: .12s; }
.rel-add.added { background: var(--brand); color: var(--on-accent); }
.rel-add:active { transform: scale(.95); }
.related-hint { font-size: 12px; color: var(--text-faint); margin: 10px 0 0; }
@media (min-width: 840px) { .detail-related { grid-column: 1 / -1; } }

/* ===================== ESTUDIO: MOVER CAPAS ===================== */
.post-preview { position: relative; }
.move-toggle {
  position: absolute; top: 10px; left: 10px; z-index: 4;
  display: inline-flex; align-items: center; gap: 6px; padding: 8px 13px; border-radius: var(--pill);
  background: rgba(0,0,0,.5); color: #fff; border: 1px solid rgba(255,255,255,.25);
  font-family: var(--font-emph); font-weight: 700; font-size: 12px; letter-spacing: .02em; cursor: pointer;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); transition: .15s;
}
.move-toggle.active { background: var(--brand); color: var(--on-accent); border-color: transparent; box-shadow: var(--glow-tight); }
.move-bar {
  position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%); z-index: 4;
  display: flex; align-items: center; gap: 12px; padding: 8px 10px 8px 16px; border-radius: var(--pill);
  background: rgba(0,0,0,.62); border: 1px solid rgba(255,255,255,.22);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); max-width: 92%;
}
.move-label { font-family: var(--font-emph); font-weight: 700; font-size: 12px; color: #fff; white-space: nowrap; }
.move-actions { display: flex; gap: 6px; }
.move-actions button {
  width: 34px; height: 34px; border-radius: 50%; border: 1px solid rgba(255,255,255,.25);
  background: rgba(255,255,255,.1); color: #fff; font-size: 17px; font-weight: 700; cursor: pointer; line-height: 1;
  display: grid; place-items: center; transition: .12s;
}
.move-actions button:active { transform: scale(.88); }
@media (hover: hover) { .move-actions button:hover { border-color: var(--brand); color: var(--brand); } }

/* En modo tienda no aplica el estudio, pero por si acaso el móvil pequeño */
@media (max-width: 380px) { .move-toggle { font-size: 11px; padding: 7px 10px; } }

/* Salir de la tienda pegajosa (discreto, solo en modo tienda) */
.store-exit { display: none; }
body.storefront .store-exit {
  display: inline-block; margin: 4px auto 0; padding: 8px 16px; border-radius: var(--pill);
  background: transparent; border: 1px solid var(--line); color: var(--text-faint);
  font-family: var(--font-display); font-size: 12px; cursor: pointer; transition: .15s;
}
@media (hover: hover) { body.storefront .store-exit:hover { border-color: var(--brand); color: var(--brand); } }

/* Botón "Fijar este precio" en la calculadora de la ficha */
.profit-fix {
  width: 100%; margin-top: 12px; padding: 11px; border-radius: var(--radius-md);
  border: 1.5px solid var(--line); background: transparent; color: var(--text);
  font-family: var(--font-emph); font-weight: 800; font-size: 12.5px; letter-spacing: .03em; text-transform: uppercase;
  cursor: pointer; transition: .15s;
}
.profit-fix:active { transform: scale(.98); }
@media (hover: hover) { .profit-fix:hover { border-color: var(--brand); color: var(--brand); } }
.profit-fix.fixed { background: rgba(50,251,0,.12); border-color: var(--brand); color: var(--brand); }
.profit-fixhint { font-size: 11.5px; line-height: 1.45; color: var(--text-faint); margin: 8px 0 0; }

/* ===================== ESTUDIO 2.0: RÁPIDO + PRO ===================== */
.studio-heading { min-width: 0; }
.studio-title-short { display:none; }
.studio-heading p { margin: 4px 0 0; color: var(--text-faint); font-family: var(--font-display); font-size: 11.5px; line-height: 1.3; }
.modal-head-actions { display: flex; align-items: center; gap: 8px; }
.studio-mode { display: inline-flex; padding: 3px; border-radius: var(--pill); background: var(--input); border: 1px solid var(--line); }
.studio-mode button {
  min-height: 32px; padding: 6px 11px; border: 0; border-radius: var(--pill); background: transparent; color: var(--text-muted);
  font-family: var(--font-emph); font-size: 10.5px; font-weight: 800; letter-spacing: .03em; text-transform: uppercase; cursor: pointer;
}
.studio-mode button.active { background: var(--brand); color: var(--on-accent); box-shadow: var(--glow-tight); }
.studio-quick .studio-pro-section, .studio-quick .studio-pro-only { display: none !important; }
.studio-pro .studio-quick-hint { display: none; }

.post-tab-btn { display: flex; align-items: center; justify-content: center; gap: 7px; }
.post-tab-btn b { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: rgba(255,255,255,.08); font-size: 10px; }
.post-tab-btn.active b { background: rgba(0,0,0,.16); }
.post-tab-btn span { min-width: 0; }

.studio-intro-field .post-formats { display: grid; grid-template-columns: repeat(4, 1fr); }
.studio-intro-field .post-fmt { display: grid; place-items: center; gap: 4px; min-height: 56px; line-height: 1.15; }

/* Las composiciones sí muestran la estructura final, no un emoji genérico. */
.layout-library { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.layout-card {
  min-width: 0; padding: 8px; border: 1.5px solid var(--line); border-radius: 14px; background: var(--raised); color: var(--text);
  text-align: left; cursor: pointer; transition: transform .15s, border-color .15s, box-shadow .15s;
}
.layout-card:active { transform: scale(.97); }
.layout-card.active { border-color: var(--brand); box-shadow: 0 0 0 2px rgba(50,251,0,.12), var(--glow-tight); }
.layout-card strong, .layout-card small { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.layout-card strong { margin-top: 7px; font-family: var(--font-emph); font-size: 11px; font-weight: 800; text-transform: uppercase; }
.layout-card small { margin-top: 2px; color: var(--text-faint); font-family: var(--font-display); font-size: 9.5px; }
.layout-preview { position: relative; display: block; height: 82px; overflow: hidden; border-radius: 9px; background: #090909; box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); }
.layout-preview::after { content: ""; position: absolute; inset: auto 8px 8px; height: 8px; border-radius: 5px; background: var(--brand); opacity: .9; }
.layout-preview i, .layout-preview b, .layout-preview em { position: absolute; display: block; }
.layout-preview i { background: #fff; border-radius: 6px; }
.layout-preview b, .layout-preview em { height: 5px; border-radius: 4px; background: rgba(255,255,255,.72); }
.lp-classic i { left: 13px; right: 13px; top: 9px; height: 43px; }
.lp-classic b { left: 20px; right: 20px; top: 58px; }
.lp-classic em { display: none; }
.lp-spotlight { background: radial-gradient(circle at 50% 42%, rgba(50,251,0,.34), transparent 48%), #080808; }
.lp-spotlight i { width: 48px; height: 54px; left: calc(50% - 24px); top: 8px; border-radius: 24px 24px 8px 8px; }
.lp-spotlight b { left: 18px; right: 18px; top: 66px; }
.lp-spotlight em { display: none; }
.lp-split { background: linear-gradient(90deg, rgba(50,251,0,.2) 0 43%, #080808 43%); }
.lp-split i { width: 43%; right: 8px; top: 11px; bottom: 18px; }
.lp-split b { left: 8px; width: 29%; top: 22px; }
.lp-split em { left: 8px; width: 23%; top: 34px; height: 5px; background: rgba(255,255,255,.42); }
.lp-price i { width: 48%; height: 46px; right: 8px; bottom: 15px; }
.lp-price b { left: 8px; width: 45%; top: 13px; height: 14px; background: var(--brand); }
.lp-price em { left: 8px; width: 36%; top: 35px; background: rgba(255,255,255,.55); }
.lp-catalog { background: #e9ecef; }
.lp-catalog i { left: 8px; right: 8px; top: 8px; height: 49px; }
.lp-catalog b { left: 12px; width: 46%; top: 63px; background: #202124; }
.lp-catalog em { right: 12px; width: 27%; top: 63px; background: #18a34a; }
.lp-editorial { background: linear-gradient(145deg, #090909 0 58%, rgba(50,251,0,.24) 58%); }
.lp-editorial i { width: 49%; height: 59px; right: 5px; bottom: 5px; transform: rotate(-5deg); }
.lp-editorial b { left: 8px; width: 42%; top: 15px; height: 7px; }
.lp-editorial em { left: 8px; width: 31%; top: 30px; background: var(--brand); }

/* Los presets muestran una miniatura cromática renderizada. */
.lib-preview { --pa: var(--brand); position: relative; width: 100%; height: 56px; overflow: hidden; border-radius: 10px; background: #0b0b0b; box-shadow: inset 0 0 0 2px var(--pa); }
.lib-preview.light { background: #edf0f2; }
.lib-preview.tall { height:82px; }
.lib-preview.tall i { top:11px; height:49px; }
.lib-preview.tall b { top:16px; }
.lib-preview.tall em { top:30px; }
.lib-preview.portrait { height:86px; }
.lib-preview.portrait i { top:8px; height:55px; }
.lib-preview.portrait b { top:18px; }
.lib-preview.portrait em { top:34px; }
.lib-preview i { position: absolute; width: 44%; height: 35px; top: 8px; left: 8px; border-radius: 6px; background: #fff; }
.lib-preview b { position: absolute; left: 58%; right: 8px; top: 12px; height: 5px; border-radius: 4px; background: var(--pa); }
.lib-preview em { position: absolute; left: 58%; right: 14px; top: 24px; height: 14px; border-radius: 4px; background: rgba(255,255,255,.22); }
.lib-preview.light em { background: rgba(0,0,0,.14); }

@media (hover: hover) {
  .layout-card:hover { border-color: var(--brand); transform: translateY(-2px); }
}

@media (max-width: 839px) {
  .post-sheet .modal-head { align-items: flex-start; padding: 13px 14px 10px; }
  .studio-heading p { display: none; }
  .modal-head-actions { gap: 6px; }
  .head-chip { width: 36px; padding: 0; font-size: 0; }
  .head-chip::before { content: "🖼️"; font-size: 15px; }
  .studio-mode button { min-height: 30px; padding: 5px 9px; font-size: 9.5px; }
  .post-sheet .post-preview { min-height: 218px; height: 30vh; max-height: 260px; }
  .post-sheet #postCanvas { max-height: calc(30vh - 20px); max-width: 58%; }
  .post-sheet .post-body { padding-top: 0; }
  .post-tabs { gap: 6px; padding-block: 8px 10px; }
  .post-tab-btn { min-height: 40px; padding: 8px 4px; gap: 5px; font-size: 10.5px; }
  .post-tab-btn b { width: 18px; height: 18px; }
  .studio-intro-field .post-formats { grid-template-columns: repeat(2, 1fr); }
  .layout-library { display: flex; overflow-x: auto; margin: 0 -16px; padding: 2px 16px 10px; scrollbar-width: none; }
  .layout-library::-webkit-scrollbar { display: none; }
  .layout-card { flex: 0 0 122px; }
  .studio-quick .post-tab[data-tab="contenido"] .post-field { padding-block: 13px; }
  .studio-quick .post-foot { flex-wrap: nowrap; padding-block: 8px calc(8px + var(--safe-bottom)); }
  .studio-quick .post-foot .post-caption-btn { flex: 0 0 44px; width: 44px; font-size: 0; padding: 0; }
  .studio-quick .post-foot .post-caption-btn::before { content: "📝"; font-size: 17px; }
  .studio-quick .post-foot #postSave { display: none; }
  .studio-quick .post-foot .btn-ghost, .studio-quick .post-foot .btn-wa { min-height: 44px; }
}

@media (min-width: 840px) {
  .studio-quick .post-sheet { grid-template-columns: minmax(0, 1fr) minmax(420px, 500px); }
  .layout-preview { height: 88px; }
}

/* Preferencias que viajan dentro del enlace público de cada tienda. */
body.storefront[data-store-theme="light"] {
  --bg: #f4f5f6; --surface: #ffffff; --raised: #ffffff; --card: #ffffff; --input: #f1f3f4;
  --line: rgba(0,0,0,.12); --line-2: rgba(0,0,0,.07); --text: #111315;
  --text-body: rgba(0,0,0,.78); --text-muted: rgba(0,0,0,.55); --text-faint: rgba(0,0,0,.36);
  background: var(--bg); color: var(--text-body);
}
body.storefront[data-store-theme="light"] .hero,
body.storefront[data-store-theme="light"] .footer { background: var(--bg); }
body.storefront[data-store-theme="light"] .hero-bg { opacity: .42; }
body.storefront[data-store-theme="light"] .card { box-shadow: 0 8px 24px rgba(0,0,0,.08); }
body.storefront[data-store-density="compact"] .grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; }
body.storefront[data-store-density="compact"] .card-body { padding: 11px; }
body.storefront[data-store-density="compact"] .card-imgwrap { aspect-ratio: 1.18 / 1; }
body.storefront[data-store-density="compact"] .card-name { font-size: 12px; min-height: 32px; }

/* ===================== FICHA Y ESTUDIO 3.0 ===================== */
/* La ficha separa con claridad la información privada del vendedor y las
   dos ayudas principales: crear una pieza o preparar un mensaje. */
.detail-topline { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.detail-private { flex:none; padding:5px 9px; border:1px solid rgba(255,255,255,.11); border-radius:var(--pill); color:var(--text-faint); font-family:var(--font-emph); font-size:9px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }
.detail-pricing { margin-top:18px; padding:14px; border:1px solid var(--line); border-radius:18px; background:rgba(255,255,255,.025); }
.detail-info { display:flex; flex-direction:column; }
.detail-info .detail-topline { order:1; }
.detail-info .detail-name { order:2; }
.detail-info .detail-badges { order:3; }
.detail-info .seller-assist { order:4; }
.detail-info .detail-pricing { order:5; }
.detail-cost-row { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:0 2px 12px; color:var(--text-muted); font-size:12px; }
.detail-cost-row strong { color:var(--text); font-family:var(--font-emph); font-size:18px; }
.detail-pricing .profit { margin:0; padding:14px; border-radius:14px; background:var(--raised); border-color:rgba(50,251,0,.22); }
.detail-pricing .profit-head { display:flex; align-items:baseline; justify-content:space-between; gap:10px; }
.detail-pricing .profit-head span { color:var(--brand); }
.detail-pricing .profit-head small { color:var(--text-faint); font-family:var(--font-display); font-size:10px; font-weight:500; letter-spacing:0; text-transform:none; }
.detail-pricing .profit-input { margin-top:10px; }
.detail-pricing .profit-cost { color:var(--text-faint); font-size:10px; }
.detail-pricing .profit-fix { margin-top:10px; padding:10px; text-transform:none; letter-spacing:0; }
.detail-pricing .profit-fixhint { margin-bottom:0; }
.seller-assist { margin-top:18px; }
.seller-assist-head span { color:var(--text); font-family:var(--font-emph); font-size:17px; font-weight:850; letter-spacing:-.02em; }
.seller-assist-head p { margin:4px 0 13px; color:var(--text-muted); font-size:12px; }
.seller-actions { display:grid; gap:9px; }
.seller-action { width:100%; display:grid; grid-template-columns:38px minmax(0,1fr) auto; align-items:center; gap:11px; padding:13px; border:1px solid var(--line); border-radius:15px; background:var(--raised); color:var(--text); text-align:left; cursor:pointer; transition:.16s; }
.seller-action.primary { border-color:rgba(50,251,0,.55); background:linear-gradient(115deg,rgba(50,251,0,.13),rgba(50,251,0,.035)); }
.seller-action:active { transform:scale(.985); }
.seller-action-icon { width:38px; height:38px; display:grid; place-items:center; border-radius:11px; background:rgba(255,255,255,.07); font-size:17px; }
.seller-action.primary .seller-action-icon { background:var(--brand); color:var(--on-accent); box-shadow:var(--glow-tight); }
.seller-action b,.seller-action small { display:block; }
.seller-action b { font-family:var(--font-emph); font-size:13px; font-weight:800; }
.seller-action small { margin-top:3px; color:var(--text-faint); font-size:10.5px; line-height:1.35; }
.seller-action i { color:var(--brand); font-size:18px; font-style:normal; }
.detail-safe-note { display:flex; align-items:flex-start; gap:9px; margin-top:12px; padding:10px 11px; border-radius:12px; background:rgba(50,251,0,.065); color:var(--text-muted); }
.detail-safe-note p { margin:0; font-size:11px; line-height:1.45; }
.detail-safe-note b { color:var(--brand); }
.share-opt.compact { margin-top:9px; justify-content:center; }
/* El compartir es el protagonista: botón sólido junto al precio de venta */
.detail-share-hero { margin-top:12px; border:0; background:var(--brand); color:var(--on-accent); box-shadow:var(--glow-tight); }
@media (hover:hover) { .detail-share-hero:hover { background:var(--brand-hover); box-shadow:var(--glow); } }
.detail-related summary { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 2px; color:var(--text); cursor:pointer; list-style:none; }
.detail-related summary::-webkit-details-marker { display:none; }
.detail-related summary span { font-family:var(--font-emph); font-size:12px; font-weight:800; text-transform:uppercase; letter-spacing:.03em; }
.detail-related summary small { flex:none; color:var(--brand); font-family:var(--font-emph); font-size:10px; font-weight:800; }
.detail-related[open] summary small { font-size:0; }
.detail-related[open] summary small::after { content:"Ocultar"; font-size:10px; }

/* Preset primero: en celular las miniaturas son suficientemente grandes para
   poder escoger por apariencia, no por un nombre abstracto. */
.preset-first,.format-first { padding-top:14px!important; }
.preset-lead { margin:-3px 0 13px; }
.preset-lib { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.lib-card { min-width:0; }
.lib-card.active { border-color:var(--brand); box-shadow:0 0 0 2px rgba(50,251,0,.13),var(--glow-tight); }
.lib-preview { height:72px; }
.lib-preview.bg-aurora { background:radial-gradient(circle at 20% 20%,color-mix(in srgb,var(--pa) 42%,transparent),transparent 42%),#090909; }
.lib-preview.bg-degradado { background:linear-gradient(145deg,#090909,color-mix(in srgb,var(--pa) 34%,#090909)); }
.lib-preview.bg-rayas { background:repeating-linear-gradient(135deg,rgba(255,255,255,.045) 0 8px,transparent 8px 22px),#090909; }
.lib-preview.bg-puntos { background:radial-gradient(circle,rgba(255,255,255,.13) 1.5px,transparent 2px) 0 0/12px 12px,#090909; }
.lib-preview.bg-malla,.lib-preview.bg-chevrons { background:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px),#090909; background-size:14px 14px; }
.lib-preview.light.bg-aurora,.lib-preview.light.bg-degradado,.lib-preview.light.bg-rayas,.lib-preview.light.bg-puntos,.lib-preview.light.bg-malla,.lib-preview.light.bg-chevrons { background-color:#edf0f2; }
.lib-name { min-height:30px; display:flex; align-items:center; line-height:1.2; }
.favorite-look { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:8px; align-items:center; margin-top:12px; padding:12px; border:1px solid rgba(50,251,0,.22); border-radius:14px; background:rgba(50,251,0,.045); }
.favorite-look div { min-width:0; }
.favorite-look b,.favorite-look small { display:block; }
.favorite-look b { color:var(--text); font-family:var(--font-emph); font-size:12px; }
.favorite-look small { margin-top:3px; color:var(--text-faint); font-size:10px; line-height:1.35; }
.favorite-look button { min-height:36px; padding:0 12px; border:1px solid var(--brand); border-radius:10px; background:transparent; color:var(--brand); font-family:var(--font-emph); font-size:10px; font-weight:800; cursor:pointer; }
.favorite-look #favoriteLookApply { grid-column:2; }
.safe-price-hint { padding:9px 10px; border-radius:10px; background:rgba(50,251,0,.055); color:var(--text-muted); }
.advanced-intro { margin:12px 0 3px; padding:13px; border:1px solid var(--line); border-radius:14px; background:var(--raised); }
.advanced-intro b,.advanced-intro span { display:block; }
.advanced-intro b { color:var(--brand); font-family:var(--font-emph); font-size:12px; }
.advanced-intro span { margin-top:4px; color:var(--text-muted); font-size:11px; line-height:1.45; }
.studio-quick .move-toggle,.studio-quick .move-bar { display:none!important; }
.studio-quick .studio-intro-field,.studio-quick .quick-extra { display:none!important; }
.studio-source-detail.studio-quick .product-picker-field,.studio-source-detail .studio-intro-field { display:none!important; }
.video-intro { display:flex; gap:12px; align-items:flex-start; padding:14px; border:1px solid rgba(50,251,0,.25); border-radius:15px; background:linear-gradient(125deg,rgba(50,251,0,.1),transparent); }
.video-intro>span { width:35px; height:35px; display:grid; place-items:center; flex:none; border-radius:50%; background:var(--brand); color:var(--on-accent); font-size:13px; }
.video-intro b { font-family:var(--font-emph); font-size:13px; }
.video-intro p { margin:5px 0 0; color:var(--text-muted); font-size:11px; line-height:1.45; }
.anim-preview-btn { width:100%; min-height:42px; margin-top:12px; border:1px solid var(--line); border-radius:12px; background:var(--raised); color:var(--text); font-family:var(--font-emph); font-size:11px; font-weight:800; cursor:pointer; }
.anim-preview-btn.active { border-color:var(--brand); color:var(--brand); }
.video-support { margin:9px 0 0; padding:9px 10px; border-radius:10px; background:rgba(255,255,255,.04); color:var(--text-faint); font-size:10.5px; line-height:1.45; }
.video-support.ok { background:rgba(50,251,0,.06); color:var(--text-muted); }
#videoBtn:disabled { opacity:.42; cursor:not-allowed; filter:saturate(.25); }

@media (hover:hover) {
  .seller-action:hover { border-color:var(--brand); transform:translateY(-1px); }
  .favorite-look button:hover,.anim-preview-btn:hover { background:rgba(50,251,0,.1); }
}
@media (max-width:839px) {
  .detail-scroll { padding-top:8px; }
  .detail-img { max-height:31vh; }
  .detail-info { padding-top:13px; }
  .detail-name { margin-bottom:10px; }
  .detail-pricing { margin-top:14px; }
  .detail-related { margin-top:14px; }
  .post-sheet .post-preview { height:28vh; min-height:190px; max-height:238px; }
  .post-sheet #postCanvas { max-height:calc(28vh - 18px); max-width:64%; }
  .post-tabs { overflow-x:auto; scrollbar-width:none; }
  .post-tabs::-webkit-scrollbar { display:none; }
  .post-tab-btn { min-width:74px; }
  .preset-filters { margin-top:3px; }
  .preset-lib { display:flex; overflow-x:auto; margin:0 -16px; padding:2px 16px 10px; scrollbar-width:none; scroll-snap-type:x proximity; }
  .preset-lib::-webkit-scrollbar { display:none; }
  .preset-lib .lib-card { flex:0 0 132px; scroll-snap-align:start; }
}
@media (min-width:840px) {
  .detail-scroll { grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); }
  .detail-info { padding-right:4px; }
  .seller-actions { grid-template-columns:1fr 1fr; }
  .seller-action { grid-template-columns:38px minmax(0,1fr); }
  .seller-action i { display:none; }
  .preset-lib { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .lib-preview { height:66px; }
}

/* ===================== ESTUDIO 4.0: SIMPLE, LEGIBLE Y SEGURO ===================== */
/* La interfaz usa una sola voz tipográfica. Las tipografías creativas quedan
   dentro de la pieza, no en los controles que el vendedor debe entender. */
.post-sheet button,
.post-sheet input,
.post-sheet select,
.post-sheet textarea { font-family:var(--font-display); }
.post-sheet .btn-ghost,.post-sheet .btn-wa,.post-sheet .head-chip { letter-spacing:0; text-transform:none; }
.studio-heading h2 { font-family:var(--font-emph); font-size:18px; font-weight:800; letter-spacing:-.025em; text-transform:none; }
.studio-heading p { max-width:330px; font-size:12px; line-height:1.4; }
.head-chip { font-family:var(--font-display); font-weight:700; letter-spacing:0; text-transform:none; }

.studio-mode { gap:3px; padding:3px; border-radius:14px; background:rgba(255,255,255,.035); }
.studio-mode button {
  display:flex; flex-direction:column; align-items:flex-start; justify-content:center; gap:1px;
  min-height:42px; padding:6px 11px; border-radius:11px; font-size:11.5px; font-weight:750;
  letter-spacing:0; line-height:1.15; text-align:left; text-transform:none;
}
.studio-mode button small { color:var(--text-faint); font-size:8.5px; font-weight:600; line-height:1.2; }
.studio-mode button.active { background:var(--raised); color:var(--brand); box-shadow:0 4px 14px rgba(0,0,0,.22); }
.studio-mode button.active small { color:var(--text-muted); }

.post-tabs { gap:6px; }
.post-tab-btn {
  gap:7px; min-height:44px; padding:8px 10px; border:0; border-radius:12px;
  background:transparent; font-size:12.5px; font-weight:700; letter-spacing:0; text-transform:none;
}
.post-tab-btn b { width:24px; height:24px; background:rgba(255,255,255,.055); font-size:11px; font-weight:800; }
.post-tab-btn.active { background:rgba(50,251,0,.085); color:var(--brand); box-shadow:inset 0 0 0 1px rgba(50,251,0,.22); }
.post-tab-btn.active b { background:var(--brand); color:var(--on-accent); }
.studio-quick .post-tab-btn[data-tab="diseno"] { display:none; }

.post-tab > .post-field {
  margin-bottom:10px; padding:16px; border:1px solid var(--line); border-radius:17px;
  background:rgba(255,255,255,.018);
}
.post-tab > .post-field:first-child { padding-top:16px; border-top:1px solid var(--line); }
.post-label {
  display:flex; align-items:center; gap:9px; margin-bottom:11px; color:var(--text);
  font-family:var(--font-display); font-size:14px; font-weight:750; letter-spacing:-.01em; line-height:1.25; text-transform:none;
}
.flow-number {
  display:grid; place-items:center; flex:0 0 25px; width:25px; height:25px; border-radius:8px;
  background:rgba(50,251,0,.1); color:var(--brand); font-size:11px; font-weight:800;
}
.post-label .label-btn { float:none; margin-left:auto; padding:7px 9px; border-radius:9px; background:rgba(50,251,0,.075); font-size:10.5px; font-weight:700; }
.post-hint { font-size:12px; line-height:1.5; }
.preset-lead { margin:-2px 0 14px; color:var(--text-muted); }

.preset-filters { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:7px; overflow:visible; margin:0 0 12px; padding:0; }
.preset-filters .fchip {
  min-width:0; min-height:36px; padding:8px 7px; border-radius:10px; font-family:var(--font-display);
  font-size:10.5px; font-weight:700; letter-spacing:0; line-height:1.15; text-transform:none; white-space:normal;
}
.preset-lib { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.lib-card {
  position:relative; display:grid; grid-template-rows:auto minmax(42px,auto); align-items:stretch; justify-content:stretch;
  gap:9px; min-width:0; min-height:0; padding:9px; border-radius:15px; text-align:left;
}
.lib-card.active { border-color:var(--brand); background:rgba(50,251,0,.045); box-shadow:0 0 0 2px rgba(50,251,0,.1); }
.lib-preview { height:78px; border-radius:11px; box-shadow:inset 0 0 0 1px rgba(255,255,255,.1); }
.lib-copy { display:block; min-width:0; padding:0 2px 1px; }
.lib-name { min-height:0; display:block; color:var(--text); font-family:var(--font-display); font-size:12.5px; font-weight:750; line-height:1.25; text-align:left; }
.lib-copy small { display:block; margin-top:3px; overflow:hidden; color:var(--text-faint); font-size:9.5px; font-weight:550; line-height:1.25; white-space:nowrap; text-overflow:ellipsis; }
.lib-selected {
  position:absolute; top:14px; right:14px; display:none; place-items:center; width:22px; height:22px;
  border:2px solid #fff; border-radius:50%; background:var(--brand); color:var(--on-accent); font-size:11px; font-weight:900; box-shadow:0 3px 10px rgba(0,0,0,.35);
}
.lib-card.active .lib-selected { display:grid; }
.lib-season {
  position:absolute; right:8px; bottom:7px; z-index:3; display:grid; place-items:center;
  width:23px; height:23px; border:1px solid color-mix(in srgb,var(--pa) 48%,transparent);
  border-radius:8px; background:rgba(0,0,0,.48); font-size:12px; line-height:1; box-shadow:0 4px 12px rgba(0,0,0,.25);
}
.lib-preview.light .lib-season { background:rgba(255,255,255,.78); }
.lib-preview.wide i { left:6px!important; top:10px!important; width:43%!important; height:58px!important; border-radius:9px!important; transform:none!important; }
.lib-preview.wide b { left:54%!important; right:8px!important; top:19px!important; width:auto!important; height:8px!important; }
.lib-preview.wide em { display:block!important; left:54%!important; right:13px!important; top:38px!important; width:auto!important; height:20px!important; }
.lib-preview.wide .lib-season { left:7px; right:auto; bottom:6px; }

/* Las miniaturas representan la composición que realmente se aplica. */
.lib-preview.layout-classic i { left:16%; top:7px; width:68%; height:43px; }
.lib-preview.layout-classic b { left:18%; right:18%; top:56px; }
.lib-preview.layout-classic em { display:none; }
.lib-preview.layout-spotlight i { left:27%; top:6px; width:46%; height:47px; border-radius:18px 18px 7px 7px; }
.lib-preview.layout-spotlight b { left:20%; right:20%; top:58px; }
.lib-preview.layout-spotlight em { display:none; }
.lib-preview.layout-split { background-image:linear-gradient(90deg,color-mix(in srgb,var(--pa) 24%,transparent) 0 43%,transparent 43%); }
.lib-preview.layout-split i { left:50%; top:8px; width:42%; height:55px; }
.lib-preview.layout-split b { left:8px; right:auto; top:19px; width:32%; height:7px; }
.lib-preview.layout-split em { left:8px; right:auto; top:33px; width:27%; height:18px; }
.lib-preview.layout-price i { left:48%; top:26px; width:44%; height:43px; }
.lib-preview.layout-price b { left:8px; right:8px; top:8px; height:13px; background:var(--pa); }
.lib-preview.layout-price em { left:8px; right:auto; top:32px; width:34%; height:23px; }
.lib-preview.layout-catalog { background:#e9edf0; }
.lib-preview.layout-catalog i { left:7px; top:7px; width:calc(100% - 14px); height:47px; box-shadow:0 2px 8px rgba(0,0,0,.12); }
.lib-preview.layout-catalog b { left:11px; right:auto; top:60px; width:42%; background:#202124; }
.lib-preview.layout-catalog em { left:auto; right:11px; top:58px; width:28%; height:9px; background:var(--pa); }
.lib-preview.layout-editorial i { left:48%; top:9px; width:44%; height:60px; transform:rotate(-4deg); }
.lib-preview.layout-editorial b { left:9px; right:auto; top:17px; width:31%; height:7px; }
.lib-preview.layout-editorial em { left:9px; right:auto; top:32px; width:35%; height:21px; }

/* En 3:4 las composiciones verticales se apilan también en la miniatura,
   para que el preset prometa exactamente la estructura que se va a exportar. */
.lib-preview.portrait.layout-split { background-image:linear-gradient(180deg,color-mix(in srgb,var(--pa) 24%,transparent) 0 40%,transparent 40%); }
.lib-preview.portrait.layout-split i { left:30%; top:39px; width:40%; height:39px; }
.lib-preview.portrait.layout-split b { left:10px; right:10px; top:11px; width:auto; height:7px; }
.lib-preview.portrait.layout-split em { left:10px; right:34%; top:24px; width:auto; height:7px; }
.lib-preview.portrait.layout-price i { left:30%; top:28px; width:40%; height:43px; }
.lib-preview.portrait.layout-price b { left:10px; right:10px; top:8px; width:auto; height:13px; }
.lib-preview.portrait.layout-price em { left:24%; right:24%; top:75px; width:auto; height:6px; }
.lib-preview.portrait.layout-editorial i { left:31%; top:34px; width:44%; height:45px; transform:rotate(-2deg); }
.lib-preview.portrait.layout-editorial b { left:10px; right:auto; top:10px; width:34%; height:7px; }
.lib-preview.portrait.layout-editorial em { left:10px; right:34%; top:22px; width:auto; height:8px; }

#postFormats { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
#postFormats .badge-chip {
  display:flex; flex-direction:column; align-items:flex-start; justify-content:center; gap:2px;
  min-height:58px; padding:10px 12px; border-radius:13px; font-family:var(--font-display);
  font-size:12px; font-weight:750; letter-spacing:0; line-height:1.2; text-transform:none; text-align:left;
}
#postFormats .badge-chip small { color:var(--text-faint); font-size:9.5px; font-weight:600; }
#postFormats .badge-chip.active small { color:rgba(0,0,0,.58); }
.layout-guard-note { display:grid; grid-template-columns:auto minmax(0,1fr); align-items:start; column-gap:7px; margin-top:10px; padding:10px 11px; border-radius:11px; background:rgba(50,251,0,.055); }
.layout-guard-note::before { content:"✓"; grid-row:1 / span 2; color:var(--brand); font-weight:900; }
.layout-guard-note b,.layout-guard-note span { display:block; }
.layout-guard-note b,.layout-guard-note span { grid-column:2; }
.layout-guard-note b { color:var(--text); font-size:10.5px; font-weight:750; }
.layout-guard-note span { margin-top:2px; color:var(--text-faint); font-size:9.5px; line-height:1.35; }
.layout-guard-note.adapted { background:rgba(0,229,255,.055); }
.layout-guard-note.adapted::before { content:"↔"; color:#00e5ff; }

.post-fmt,.badge-chip,.preset-chip { font-family:var(--font-display); font-weight:700; letter-spacing:0; text-transform:none; }
.post-input { border-radius:13px; font-family:var(--font-display); }
.favorite-look { border-radius:15px; background:rgba(255,255,255,.025); }
.favorite-look b { font-family:var(--font-display); font-size:12.5px; }
.favorite-look button { border-radius:10px; font-family:var(--font-display); font-size:10.5px; letter-spacing:0; text-transform:none; }

.studio-quick .post-foot { display:grid; grid-template-columns:.9fr 1fr 1fr; gap:8px; }
.studio-quick .post-foot #postSave { display:none; }
.studio-quick .post-foot .post-caption-btn { width:auto; font-size:11px; }
.studio-quick .post-foot .post-caption-btn::before { content:none; }
.studio-quick .post-foot .dl-wrap { min-width:0; }
.studio-quick .post-foot .btn-ghost,.studio-quick .post-foot .btn-wa { min-height:46px; border-radius:12px; font-family:var(--font-display); font-size:11.5px; font-weight:750; letter-spacing:0; }
.studio-quick .post-foot .btn-ghost,.studio-quick .post-foot .btn-wa { text-transform:none; }
.studio-quick[data-quick-step="0"] .post-foot,
.studio-quick[data-quick-step="1"] .post-foot,
.studio-quick[data-quick-step="2"] .post-foot,
.studio-quick[data-quick-step="3"] .post-foot { display:none; }

@media (max-width:839px) {
  .post-sheet .modal-head { align-items:center; }
  .studio-heading h2 { max-width:118px; font-size:15px; line-height:1.15; }
  .studio-mode button { min-height:36px; padding:5px 8px; font-size:10px; }
  .studio-mode button small { display:none; }
  /* Ícono claro de galería: el glifo "▦" se veía como un error de fuente */
  .head-chip::before { content:"🖼️"; font-size:16px; }
  .head-chip { position:relative; display:inline-grid; place-items:center; width:36px; height:36px; border-radius:50%; }
  .head-chip .gcount { position:absolute; top:-5px; right:-5px; }
  .post-tab-btn { min-width:0; font-size:11.5px; }
  .post-tab-btn b { width:22px; height:22px; }
  .post-tab > .post-field { margin-bottom:9px; padding:14px; border-radius:15px; }
  .post-label { font-size:13.5px; }
  .preset-filters { margin:0 0 11px; padding:0; }
  .preset-lib { display:grid!important; grid-template-columns:repeat(2,minmax(0,1fr)); overflow:visible; margin:0; padding:0; scroll-snap-type:none; }
  .preset-lib .lib-card { min-width:0; width:auto; }
  .lib-preview { height:72px; }
  #postFormats { overflow:visible; margin:0; padding:0; }
  #postFormats > * { flex:auto; }
  .studio-quick .post-foot { grid-template-columns:1fr 1fr; padding:8px 12px calc(8px + var(--safe-bottom)); }
  .studio-quick .post-foot .post-caption-btn { grid-column:1 / -1; min-height:38px; font-size:11px; }
  .studio-quick .post-foot .post-caption-btn::before { content:none; }
}

@media (max-width:359px) {
  .post-sheet .modal-head { padding-inline:8px; }
  .modal-head-actions { gap:4px; }
  .studio-mode button { padding-inline:6px; font-size:8.5px; }
  .studio-heading h2 { max-width:76px; line-height:1; }
  .studio-title-full { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
  .studio-title-short { display:block; font-size:13px; line-height:1.05; }
}

@media (min-width:840px) {
  .preset-lib { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .lib-preview { height:74px; }
}

/* ===================== FLUJO RÁPIDO PASO A PASO ===================== */
.quick-flow { display:none; }
.studio-quick .quick-flow {
  display:block; margin:1px 0 11px; padding:13px; border:1px solid rgba(50,251,0,.2);
  border-radius:16px; background:linear-gradient(145deg,rgba(50,251,0,.07),rgba(255,255,255,.018));
  box-shadow:0 10px 24px rgba(0,0,0,.14);
}
.quick-flow-heading { display:flex; align-items:baseline; justify-content:space-between; gap:10px; margin-bottom:12px; }
.quick-flow-heading span {
  color:var(--brand); font-size:9.5px; font-weight:800; letter-spacing:.06em; line-height:1.2; text-transform:uppercase;
}
.quick-flow-heading strong { color:var(--text); font-size:12.5px; font-weight:750; line-height:1.3; text-align:right; }
.quick-steps {
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:0; margin:0; padding:0; list-style:none;
}
.quick-steps li { position:relative; min-width:0; }
.quick-steps li:not(:last-child)::after {
  content:""; position:absolute; z-index:0; top:13px; left:calc(50% + 14px); width:calc(100% - 28px); height:2px;
  border-radius:2px; background:rgba(255,255,255,.1);
}
.quick-steps li.done:not(:last-child)::after { background:rgba(50,251,0,.55); }
.quick-step {
  position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; gap:5px; width:100%; min-width:0;
  padding:0 2px; border:0; background:transparent; color:var(--text-faint); cursor:pointer;
}
.quick-step > span {
  display:grid; place-items:center; width:28px; height:28px; border:1px solid var(--line); border-radius:9px;
  background:var(--raised); color:var(--text-muted); font-size:10.5px; font-weight:800; box-shadow:0 3px 9px rgba(0,0,0,.18);
}
.quick-step small {
  display:block; width:100%; overflow:hidden; font-size:9px; font-weight:650; line-height:1.2;
  text-align:center; white-space:nowrap; text-overflow:ellipsis;
}
.quick-step.active,.quick-step[aria-current="step"] { color:var(--text); }
.quick-step.active > span,.quick-step[aria-current="step"] > span {
  border-color:var(--brand); background:var(--brand); color:var(--on-accent); box-shadow:var(--glow-tight);
}
.quick-step.done > span,.quick-steps li.done .quick-step > span {
  border-color:rgba(50,251,0,.45); background:rgba(50,251,0,.1); color:var(--brand);
}
.quick-flow-actions { display:none; }
.studio-quick .quick-flow-actions {
  display:grid; grid-template-columns:minmax(74px,1fr) auto minmax(112px,1.35fr); align-items:center; gap:8px;
  position:sticky; top:62px; z-index:4; margin:2px 0 10px; padding:10px 11px; border:1px solid rgba(50,251,0,.18); border-radius:14px;
  background:linear-gradient(145deg,rgba(50,251,0,.075),rgba(255,255,255,.02)); box-shadow:0 10px 24px rgba(0,0,0,.14);
  backdrop-filter:blur(18px) saturate(150%); -webkit-backdrop-filter:blur(18px) saturate(150%);
}
.quick-prev,.quick-next,.quick-ready {
  min-height:44px; padding:8px 11px; border-radius:11px; font-size:10.5px; font-weight:750; line-height:1.15; cursor:pointer;
}
.quick-prev { border:1px solid var(--line); background:transparent; color:var(--text-muted); }
.quick-prev:disabled { opacity:.38; cursor:not-allowed; }
.quick-next,.quick-ready { grid-column:3; grid-row:1; border:1px solid transparent; background:var(--brand); color:var(--on-accent); box-shadow:var(--glow-tight); }
.quick-flow-status { color:var(--text-faint); font-size:9.5px; font-weight:650; line-height:1.2; white-space:nowrap; text-align:center; }

/* En Rápido solo se ve el contenido del paso actual. Personalizar conserva
   todos los campos y el orden completo existente. */
.studio-quick .post-tab[data-tab="contenido"] > .post-field[data-quick-step] { display:none; }
.studio-quick .post-tab[data-tab="contenido"] > .post-field[data-quick-step].quick-step-active { display:block; }

/* ===================== SELECTOR DE ANIMACIÓN ===================== */
.anim-style-picker { display:flex; flex-direction:column; gap:14px; }
.anim-style-group + .anim-style-group { padding-top:13px; border-top:1px solid var(--line); }
.anim-style-heading { display:flex; align-items:baseline; justify-content:space-between; gap:10px; margin-bottom:9px; }
.anim-style-heading b { color:var(--text); font-size:11.5px; font-weight:750; }
.anim-style-heading small { color:var(--text-faint); font-size:9.5px; line-height:1.3; text-align:right; }
.anim-style-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
.anim-style-grid .badge-chip {
  display:flex; flex-direction:column; align-items:flex-start; justify-content:center; gap:3px; min-width:0; min-height:58px;
  padding:10px 11px; border-radius:12px; letter-spacing:0; line-height:1.15; text-align:left; text-transform:none;
}
.anim-style-grid .badge-chip span { display:block; color:var(--text); font-size:11.5px; font-weight:750; }
.anim-style-grid .badge-chip small {
  display:block; width:100%; overflow:hidden; color:var(--text-faint); font-size:9px; font-weight:550;
  line-height:1.25; white-space:nowrap; text-overflow:ellipsis;
}
.anim-style-grid .badge-chip.active span { color:var(--on-accent); }
.anim-style-grid .badge-chip.active small { color:rgba(0,0,0,.62); }

@media (max-width:359px) {
  .quick-flow { padding-inline:10px; }
  .quick-flow-heading { align-items:flex-start; flex-direction:column; gap:3px; }
  .quick-flow-heading strong { text-align:left; }
  .quick-flow-actions { grid-template-columns:70px minmax(0,1fr); }
  .quick-flow-status { display:none; }
  .quick-next,.quick-ready { grid-column:2; }
}

@media (min-width:840px) {
  .studio-quick .quick-flow { padding:15px 16px; }
  .quick-step small { font-size:9.5px; }
  .anim-style-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
}

/* ===================== INTERFAZ 5.0 · CLARA + ASISTENTE UNIVERSAL ===================== */
.theme-toggle {
  display:inline-flex; align-items:center; justify-content:center; gap:6px; min-height:34px; padding:7px 10px;
  border:1px solid var(--line); border-radius:var(--pill); background:var(--raised); color:var(--text);
  font:700 10.5px/1 var(--font-display); cursor:pointer; box-shadow:var(--glass-hi); transition:.18s var(--ease);
}
.theme-toggle span { font-size:15px; line-height:1; }
.theme-toggle small { font:inherit; }
.theme-toggle:active { transform:scale(.94); }
@media (hover:hover) { .theme-toggle:hover { border-color:var(--brand); transform:translateY(-1px); } }
.theme-toggle-compact { width:34px; padding:0; border-radius:10px; }
.theme-toggle-compact small { display:none; }

.piece-type-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; }
.piece-type-card {
  display:grid; grid-template-columns:34px minmax(0,1fr); grid-template-rows:auto auto; gap:2px 9px;
  align-items:center; min-height:72px; padding:12px; border:1px solid var(--line); border-radius:14px;
  background:var(--raised); color:var(--text); text-align:left; cursor:pointer; transition:.16s var(--ease);
}
.piece-type-card > span { grid-row:1 / 3; display:grid; place-items:center; width:34px; height:34px; border-radius:11px; background:var(--glass-2); color:var(--brand-ink); font-size:17px; }
.piece-type-card b { align-self:end; font-size:12.5px; line-height:1.2; }
.piece-type-card small { align-self:start; overflow:hidden; color:var(--text-faint); font-size:9.5px; line-height:1.25; white-space:nowrap; text-overflow:ellipsis; }
.piece-type-card.active { border-color:var(--brand); background:rgba(50,251,0,.08); box-shadow:0 0 0 2px rgba(50,251,0,.1); }
.piece-type-card.active > span { background:var(--brand); color:var(--on-accent); }

.studio-pro .studio-quick-only { display:none!important; }
.studio-quick .studio-intro-field.quick-step-active { display:block!important; }
.quick-style-step { display:grid; gap:14px; }
.quick-style-step > .post-label,.quick-style-step > .post-hint { margin-bottom:0; }
.quick-style-group { display:grid; gap:8px; padding-top:12px; border-top:1px solid var(--line-2); }
.quick-style-label { color:var(--text-muted); font-size:10px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }
#quickTypo,#quickPostThemes { display:flex; flex-wrap:wrap; gap:7px; }
#quickTypo .badge-chip { flex:1 0 calc(33.333% - 7px); min-width:92px; }
.quick-steps { grid-template-columns:repeat(5,minmax(0,1fr)); }
.preset-filters { grid-template-columns:repeat(2,minmax(0,1fr)); }
.preset-filters .fchip { min-height:40px; }
#postFormats { grid-template-columns:repeat(2,minmax(0,1fr)); }
#postFormats .badge-chip { grid-column:auto; }
.offer-chip-price {
  width:112px; min-height:34px; padding:7px 8px; border:1px solid var(--line); border-radius:9px;
  outline:0; background:var(--input); color:var(--brand-ink); font:800 11px/1 var(--font-emph); text-align:right;
}
.offer-chip-price:focus { border-color:var(--brand); box-shadow:0 0 0 3px rgba(50,251,0,.1); }

html[data-ui-theme="light"] { color-scheme:light; }
html[data-ui-theme="light"],
html[data-ui-theme="light"] body[data-ui-theme="light"] {
  --bg:#f4f6f2; --surface:#ffffff; --raised:#f7f9f5; --card:#ffffff; --input:#f2f5f0;
  --line:rgba(16,28,18,.13); --line-2:rgba(16,28,18,.075); --line-strong:#d8dfd6;
  --brand-ink:#187406; --text:#111711; --text-body:rgba(17,23,17,.84); --text-muted:rgba(17,23,17,.68); --text-faint:rgba(17,23,17,.59);
  --glass:rgba(255,255,255,.88); --glass-2:rgba(17,23,17,.045); --glass-brd:rgba(17,23,17,.12);
  --glass-hi:inset 0 1px 0 rgba(255,255,255,.92); --shadow:0 9px 28px rgba(24,40,25,.09); --shadow-lg:0 20px 55px rgba(24,40,25,.14);
  --glow:0 8px 28px rgba(50,251,0,.18); --glow-strong:0 12px 38px rgba(50,251,0,.24); --glow-tight:0 4px 16px rgba(50,251,0,.18);
}
html[data-ui-theme="light"] body { background:linear-gradient(180deg,#f8faf7 0,#f2f5f0 44%,#f7f9f6 100%); }
html[data-ui-theme="light"] .hero { background:linear-gradient(145deg,#fbfcfa 0%,#eef6eb 54%,#f8faf7 100%); }
html[data-ui-theme="light"] .hero-title .grad { color:var(--brand-ink); -webkit-text-fill-color:var(--brand-ink); }
html[data-ui-theme="light"] .hero-bg::after { background:radial-gradient(55% 62% at 42% 30%,rgba(50,251,0,.14),transparent 72%); }
html[data-ui-theme="light"] .orb { opacity:.16; filter:blur(78px); }
html[data-ui-theme="light"] .orb-1 { background:#7be968; }
html[data-ui-theme="light"] .orb-2 { background:#b4f3a5; }
html[data-ui-theme="light"] .orb-3 { background:#dff4db; }
html[data-ui-theme="light"] .hero-grid-overlay {
  background-image:linear-gradient(rgba(17,23,17,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(17,23,17,.04) 1px,transparent 1px);
}
html[data-ui-theme="light"] .community-invite {
  background:linear-gradient(110deg,rgba(50,251,0,.12),rgba(255,255,255,.86) 48%,rgba(245,249,243,.96));
  border-color:rgba(27,132,8,.28); box-shadow:0 14px 42px rgba(28,52,30,.09),inset 0 1px 0 #fff;
}
html[data-ui-theme="light"] .community-invite-copy small,
html[data-ui-theme="light"] .hero-tools-kicker,
html[data-ui-theme="light"] .mini-live,
html[data-ui-theme="light"] .flow-number,
html[data-ui-theme="light"] .quick-flow-heading span,
html[data-ui-theme="light"] .store-banner-name,
html[data-ui-theme="light"] .biz-intro b,
html[data-ui-theme="light"] .biz-hint b,
html[data-ui-theme="light"] .biz-margin-val { color:var(--brand-ink); }
html[data-ui-theme="light"] .hero-tools {
  background:rgba(255,255,255,.78); border-color:rgba(17,23,17,.11); box-shadow:0 18px 55px rgba(28,52,30,.1),inset 0 1px 0 #fff;
}
html[data-ui-theme="light"] .hero-tools .hero-share { background:#fff; color:var(--text); border-color:var(--line); box-shadow:0 6px 18px rgba(28,52,30,.055); }
html[data-ui-theme="light"] .notification-card { background:#f5faf3; border-color:rgba(27,132,8,.2); }
html[data-ui-theme="light"] .notification-card-icon { background:rgba(27,132,8,.1); }
html[data-ui-theme="light"] .install-card,
html[data-ui-theme="light"] .install-hero { background:linear-gradient(120deg,rgba(50,251,0,.1),rgba(255,255,255,.82)); border-color:rgba(27,132,8,.22); }
html[data-ui-theme="light"] .profile-entry { background:#fff; box-shadow:0 5px 16px rgba(28,52,30,.045); }
html[data-ui-theme="light"] .profile-entry.has-profile { background:#f3faef; }
html[data-ui-theme="light"] .access-gate { background:linear-gradient(145deg,#fbfcfa,#eef6eb 54%,#f8faf7); }
html[data-ui-theme="light"] .access-ambient::before { background-image:linear-gradient(rgba(17,23,17,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(17,23,17,.04) 1px,transparent 1px); }
html[data-ui-theme="light"] .access-card { background:rgba(255,255,255,.88); box-shadow:0 28px 80px rgba(28,52,30,.13),inset 0 1px 0 #fff; }
html[data-ui-theme="light"] .access-story h1 em { color:var(--brand-ink); text-shadow:0 8px 28px rgba(50,251,0,.18); }
html[data-ui-theme="light"] .hero-enter { color:var(--text); border-color:rgba(27,132,8,.48); }
html[data-ui-theme="light"] .brand-logo,
html[data-ui-theme="light"] .mini-logo,
html[data-ui-theme="light"] .footer-logo { background:#0a0d0a; border-radius:10px; padding:5px 8px; }
html[data-ui-theme="light"] .brand-logo { height:42px; }
html[data-ui-theme="light"] .brand-logo img { height:30px; }
html[data-ui-theme="light"] .mini-logo { height:30px; }
html[data-ui-theme="light"] .mini-logo img { height:18px; }
html[data-ui-theme="light"] .footer-logo { display:inline-flex; }
html[data-ui-theme="light"] .controls { box-shadow:0 8px 24px rgba(28,52,30,.07); }
html[data-ui-theme="light"] .clear-search,
html[data-ui-theme="light"] .offer-chip-x { background:rgba(17,23,17,.075); }
html[data-ui-theme="light"] .card { box-shadow:0 9px 28px rgba(28,52,30,.08); }
html[data-ui-theme="light"] .card:hover { box-shadow:0 16px 36px rgba(28,52,30,.13); }
html[data-ui-theme="light"] .cat-title .count,
html[data-ui-theme="light"] .updated-at,
html[data-ui-theme="light"] .offer-chip-price { color:var(--brand-ink); }
html[data-ui-theme="light"] .hero-support i,
html[data-ui-theme="light"] .hero-enter-chev,
html[data-ui-theme="light"] .qr-intro b,
html[data-ui-theme="light"] .gallery-empty b,
html[data-ui-theme="light"] .mini-refresh,
html[data-ui-theme="light"] .mini-toggle[aria-pressed="true"],
html[data-ui-theme="light"] .featured-section .cat-title,
html[data-ui-theme="light"] .card-vol,
html[data-ui-theme="light"] .btn-add,
html[data-ui-theme="light"] .footer-credit .credit-name,
html[data-ui-theme="light"] .qty button,
html[data-ui-theme="light"] .detail-cat,
html[data-ui-theme="light"] .detail-vol,
html[data-ui-theme="light"] .profit-out.pos,
html[data-ui-theme="light"] .profit-out.pos strong,
html[data-ui-theme="light"] .detail-share,
html[data-ui-theme="light"] .share-opt b,
html[data-ui-theme="light"] .acc-ico,
html[data-ui-theme="light"] .label-btn,
html[data-ui-theme="light"] .combo-item-price,
html[data-ui-theme="light"] .seller-note b,
html[data-ui-theme="light"] .sales-intro b,
html[data-ui-theme="light"] .sales-ctx b,
html[data-ui-theme="light"] .video-pct,
html[data-ui-theme="light"] .rel-price,
html[data-ui-theme="light"] .rel-add,
html[data-ui-theme="light"] .detail-pricing .profit-head span,
html[data-ui-theme="light"] .seller-action i,
html[data-ui-theme="light"] .detail-safe-note b,
html[data-ui-theme="light"] .detail-related summary small,
html[data-ui-theme="light"] .favorite-look button,
html[data-ui-theme="light"] .advanced-intro b,
html[data-ui-theme="light"] .anim-preview-btn.active,
html[data-ui-theme="light"] .sales-card-title,
html[data-ui-theme="light"] .mini-toggle.active,
html[data-ui-theme="light"] .biz-step-dot.done span,
html[data-ui-theme="light"] .profit-fix.fixed { color:var(--brand-ink); }
html[data-ui-theme="light"] .modal-sheet,
html[data-ui-theme="light"] .post-body { background:var(--surface); }
html[data-ui-theme="light"] .post-tabs,
html[data-ui-theme="light"] .post-tab > .post-field,
html[data-ui-theme="light"] .favorite-look,
html[data-ui-theme="light"] .studio-mode { background:rgba(17,23,17,.025); }
html[data-ui-theme="light"] .post-tab-btn b { background:rgba(17,23,17,.055); }
html[data-ui-theme="light"] .post-tab-btn.active { color:var(--brand-ink); background:rgba(50,251,0,.09); }
html[data-ui-theme="light"] .studio-mode button.active { color:var(--brand-ink); background:#fff; box-shadow:0 5px 16px rgba(28,52,30,.09); }
html[data-ui-theme="light"] .quick-flow,
html[data-ui-theme="light"] .quick-flow-actions { background:linear-gradient(145deg,rgba(50,251,0,.075),rgba(255,255,255,.86)); box-shadow:0 10px 26px rgba(28,52,30,.07); }
html[data-ui-theme="light"] .quick-steps li:not(:last-child)::after { background:rgba(17,23,17,.11); }
html[data-ui-theme="light"] .quick-step > span { background:#fff; box-shadow:0 3px 10px rgba(28,52,30,.08); }
html[data-ui-theme="light"] .quick-step.done > span,
html[data-ui-theme="light"] .quick-steps li.done .quick-step > span,
html[data-ui-theme="light"] .layout-guard-note::before { color:var(--brand-ink); }
html[data-ui-theme="light"] .post-sheet .post-preview {
  background:radial-gradient(100% 72% at 50% 5%,rgba(50,251,0,.075),transparent 64%),#edf1eb;
}
html[data-ui-theme="light"] .biz-field { border-color:var(--line-2); }
html[data-ui-theme="light"] .video-support { background:rgba(17,23,17,.035); }
html[data-ui-theme="light"] .skeleton .sk-img,
html[data-ui-theme="light"] .skeleton .sk-line { background:linear-gradient(90deg,#edf1eb,#f9faf8,#edf1eb); }
html[data-ui-theme="light"] input[type="range"]::-webkit-slider-thumb { border-color:var(--surface); }

@media (max-width:839px) {
  .hero-brandrow .theme-toggle small { display:none; }
  .hero-brandrow .theme-toggle { width:34px; padding:0; }
  .quick-step small { font-size:8px; }
  .studio-quick .quick-flow-actions { top:56px; }
  .modal-close,.head-chip { min-width:44px; width:44px; height:44px; }
  .studio-mode button { min-height:44px; }
  .offer-chip-x { width:40px; height:40px; }
}
@media (max-width:380px) {
  .piece-type-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .piece-type-card { min-height:68px; padding:9px; grid-template-columns:30px minmax(0,1fr); gap:2px 7px; }
  .piece-type-card > span { width:30px; height:30px; }
  .piece-type-card small { font-size:9.5px; }
  .quick-step small { display:block; font-size:8.5px; }
}

/* ===================== ESTUDIO: PLACA DETRÁS DEL PRODUCTO ===================== */
/* La base nunca fuerza una fila horizontal: conserva botones legibles incluso
   dentro del panel angosto del estudio. */
#postFrame {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px;
}
#postFrame .post-fmt { min-width:0; line-height:1.2; }

.plate-controls {
  margin-top:14px;
  min-width:0;
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:15px;
  background:rgba(255,255,255,.018);
}
.plate-controls[hidden] { display:none; }
.plate-controls > summary {
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  grid-template-rows:auto auto;
  align-items:center;
  column-gap:12px;
  min-height:54px;
  padding:11px 13px;
  color:var(--text);
  cursor:pointer;
  list-style:none;
  user-select:none;
}
.plate-controls > summary::-webkit-details-marker { display:none; }
.plate-controls > summary::after {
  content:"⌄";
  grid-column:2;
  grid-row:1 / span 2;
  display:grid;
  place-items:center;
  width:28px;
  height:28px;
  border-radius:9px;
  background:rgba(50,251,0,.08);
  color:var(--brand);
  font-size:18px;
  font-weight:800;
  transition:transform .18s var(--ease);
}
.plate-controls[open] > summary::after { transform:rotate(180deg); }
.plate-controls > summary:focus-visible {
  outline:3px solid var(--brand);
  outline-offset:-3px;
  border-radius:14px;
}
.plate-controls > summary span {
  min-width:0;
  font-size:13px;
  font-weight:750;
  line-height:1.25;
}
.plate-controls > summary small {
  grid-column:1;
  margin-top:2px;
  overflow:hidden;
  color:var(--text-muted);
  font-size:10.5px;
  font-weight:550;
  line-height:1.3;
  white-space:nowrap;
  text-overflow:ellipsis;
}
.plate-controls-body {
  display:grid;
  gap:17px;
  min-width:0;
  padding:15px 13px 13px;
  border-top:1px solid var(--line);
}
.plate-fieldset {
  min-width:0;
  margin:0;
  padding:0;
  border:0;
}
.plate-fieldset legend,
.plate-range-head label {
  padding:0;
  color:var(--text);
  font-size:12px;
  font-weight:750;
  line-height:1.3;
}
.plate-choice-grid {
  display:grid;
  gap:7px;
  min-width:0;
  margin-top:9px;
}
.plate-shape-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
.plate-position-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
.plate-choice-grid label { position:relative; display:block; min-width:0; cursor:pointer; }
.plate-choice-grid input {
  position:absolute;
  inset:0;
  z-index:1;
  width:100%;
  height:100%;
  margin:0;
  opacity:0;
  cursor:pointer;
}
.plate-choice {
  display:flex;
  align-items:center;
  gap:8px;
  min-width:0;
  min-height:52px;
  padding:8px 9px;
  border:1px solid var(--line);
  border-radius:12px;
  background:var(--raised);
  color:var(--text-muted);
  transition:border-color .15s,background .15s,color .15s,box-shadow .15s,transform .12s;
}
.plate-choice-grid label:active .plate-choice { transform:scale(.97); }
.plate-choice-grid input:checked + .plate-choice {
  border-color:var(--brand);
  background:rgba(50,251,0,.075);
  color:var(--text);
  box-shadow:0 0 0 2px rgba(50,251,0,.08);
}
.plate-choice-grid input:focus-visible + .plate-choice {
  outline:3px solid var(--brand);
  outline-offset:2px;
}
.plate-choice-grid input:disabled + .plate-choice { opacity:.48; cursor:not-allowed; }
.plate-choice b {
  min-width:0;
  overflow:hidden;
  font-size:10.5px;
  font-weight:700;
  line-height:1.2;
  white-space:nowrap;
  text-overflow:ellipsis;
}
.plate-shape-preview {
  position:relative;
  display:block;
  flex:0 0 34px;
  width:34px;
  height:24px;
  border:1px solid color-mix(in srgb,var(--brand) 75%,transparent);
  background:color-mix(in srgb,var(--brand) 22%,var(--raised));
  box-shadow:0 4px 10px rgba(0,0,0,.16);
}
.plate-shape-preview.rounded { border-radius:8px; transform:rotate(-3deg); }
.plate-shape-preview.oval { border-radius:50%; }
.plate-shape-preview.diagonal { border-radius:6px; transform:skewX(-12deg) rotate(-4deg); }
.plate-shape-preview.arch { border-radius:17px 17px 6px 6px; }
.plate-position-choice { justify-content:center; min-height:44px; padding-inline:6px; text-align:center; }
.plate-position-choice b { font-size:10.5px; }

.plate-range-field { min-width:0; }
.plate-range-head {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:5px;
}
.plate-range-head output {
  flex:none;
  min-width:48px;
  padding:4px 8px;
  border-radius:9px;
  background:rgba(50,251,0,.08);
  color:var(--brand);
  font-size:11px;
  font-weight:800;
  line-height:1.2;
  text-align:center;
}
.plate-range {
  width:100%;
  height:44px;
  margin:0;
  padding:0;
  border:0;
  background:transparent;
  accent-color:var(--brand);
  cursor:pointer;
  -webkit-appearance:none;
  appearance:none;
}
.plate-range:focus-visible { outline:3px solid var(--brand); outline-offset:2px; border-radius:12px; }
.plate-range::-webkit-slider-runnable-track {
  height:6px;
  border-radius:999px;
  background:var(--line-strong);
}
.plate-range::-moz-range-track {
  height:6px;
  border:0;
  border-radius:999px;
  background:var(--line-strong);
}
.plate-range::-webkit-slider-thumb {
  width:28px;
  height:28px;
  margin-top:-11px;
  border:3px solid var(--surface);
  border-radius:50%;
  background:var(--brand);
  box-shadow:var(--glow-tight);
  -webkit-appearance:none;
  appearance:none;
}
.plate-range::-moz-range-thumb {
  width:24px;
  height:24px;
  border:3px solid var(--surface);
  border-radius:50%;
  background:var(--brand);
  box-shadow:var(--glow-tight);
}
.plate-range-scale {
  display:flex;
  justify-content:space-between;
  gap:8px;
  margin-top:-1px;
  color:var(--text-muted);
  font-size:9.5px;
  line-height:1.2;
}
.plate-reset {
  width:100%;
  min-height:44px;
  border:1px solid var(--line);
  border-radius:11px;
  background:transparent;
  color:var(--text-muted);
  font-size:11.5px;
  font-weight:700;
  cursor:pointer;
  transition:border-color .15s,color .15s,background .15s,transform .12s;
}
.plate-reset:active { transform:scale(.98); }
.plate-reset:focus-visible { outline:3px solid var(--brand); outline-offset:2px; }
@media (hover:hover) {
  .plate-controls > summary:hover,
  .plate-choice-grid label:hover .plate-choice { border-color:color-mix(in srgb,var(--brand) 55%,var(--line)); }
  .plate-reset:hover { border-color:var(--brand); color:var(--brand); background:rgba(50,251,0,.045); }
}

html[data-ui-theme="light"] .plate-controls { background:rgba(17,23,17,.018); }
html[data-ui-theme="light"] .plate-choice-grid input:checked + .plate-choice {
  border-color:var(--brand-ink); color:var(--text); box-shadow:0 0 0 2px rgba(24,116,6,.1);
}
html[data-ui-theme="light"] .plate-controls > summary::after,
html[data-ui-theme="light"] .plate-range-head output { color:var(--brand-ink); }
html[data-ui-theme="light"] .plate-controls > summary:focus-visible,
html[data-ui-theme="light"] .plate-choice-grid input:focus-visible + .plate-choice,
html[data-ui-theme="light"] .plate-range:focus-visible,
html[data-ui-theme="light"] .plate-reset:focus-visible { outline-color:var(--brand-ink); }
html[data-ui-theme="light"] .plate-range { accent-color:var(--brand-ink); }
html[data-ui-theme="light"] .plate-range::-webkit-slider-thumb,
html[data-ui-theme="light"] .plate-range::-moz-range-thumb { background:var(--brand-ink); }

@media (min-width:560px) {
  #postFrame { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .plate-shape-grid { grid-template-columns:repeat(4,minmax(0,1fr)); }
  .plate-choice { flex-direction:column; justify-content:center; min-height:72px; text-align:center; }
}

@media (max-width:359px) {
  .plate-controls > summary { padding-inline:11px; }
  .plate-controls-body { padding-inline:10px; }
  .plate-choice { gap:6px; padding-inline:7px; }
  .plate-shape-preview { flex-basis:30px; width:30px; }
  .plate-choice b,.plate-position-choice b { font-size:9.5px; }
}

/* ============================================================
   INVITAR: tarjeta del kit + recordatorio al entrar
   ============================================================ */
/* Chip compacto: una línea con el cupo y el botón. El discurso completo
   vive en el recordatorio quincenal y en el modal de compartir. */
.invite-promo { margin-top:12px; padding:10px 12px; border:1px solid rgba(50,251,0,.28); border-radius:14px; background:linear-gradient(120deg, rgba(50,251,0,.1), rgba(50,251,0,.03)); display:flex; align-items:center; gap:11px; }
.invite-promo-icon { font-size:20px; line-height:1; flex:none; }
.invite-promo-copy { display:grid; gap:2px; min-width:0; flex:1; }
.invite-promo-copy b { color:var(--text); font:750 13px/1.25 "Sora",sans-serif; }
.invite-promo-quota { color:var(--brand-ink); font:650 11px/1.3 "Manrope",sans-serif; }
.invite-promo > button { flex:none; min-height:38px; padding:0 15px; border:0; border-radius:11px; background:var(--brand); color:#062b00; font:800 11px/1 "Manrope",sans-serif; cursor:pointer; }
.invite-promo > button:active { background:var(--brand-press); }

.invite-nudge-sheet { max-width:430px; padding:26px 22px 22px; text-align:center; display:grid; gap:10px; justify-items:center; }
.invite-nudge-mascot { width:78px; height:78px; object-fit:contain; }
.invite-nudge-kicker { color:var(--brand-ink); font:800 10px/1.2 "Manrope",sans-serif; letter-spacing:.1em; text-transform:uppercase; }
.invite-nudge-sheet h2 { margin:0; color:var(--text); font:800 20px/1.28 "Sora",sans-serif; }
.invite-nudge-sheet p { margin:0; color:var(--muted); font:600 13px/1.6 "Manrope",sans-serif; }
.invite-nudge-quota { color:var(--brand-ink); font:700 11px/1.5 "Manrope",sans-serif; }
.invite-nudge-actions { display:grid; gap:8px; width:100%; margin-top:6px; }
.invite-nudge-actions .btn-wa,.invite-nudge-actions .btn-ghost { width:100%; min-height:47px; margin:0; }

/* ===== Mi negocio: explicación de cómo funciona ===== */
.biz-how { margin:0 0 14px; border:1px dashed var(--line); border-radius:13px; background:var(--input); }
.biz-how summary { list-style:none; cursor:pointer; padding:11px 14px; color:var(--brand-ink); font:750 12px/1.3 "Manrope",sans-serif; user-select:none; }
.biz-how summary::-webkit-details-marker { display:none; }
.biz-how[open] summary { padding-bottom:6px; }
.biz-how ol { margin:0; padding:0 16px 13px 30px; display:grid; gap:8px; color:var(--muted); font:600 12px/1.55 "Manrope",sans-serif; }
.biz-how b { color:var(--text); }

/* Botón discreto para silenciar el recordatorio de invitar */
.invite-nudge-never { border:0; background:none; color:var(--muted); font:650 11px/1 "Manrope",sans-serif; cursor:pointer; padding:6px; text-decoration:underline; }

/* ===== Mi negocio: logo de la tienda ===== */
.biz-logo-row { display:flex; align-items:center; gap:10px; }
.biz-logo-thumb { width:56px; height:56px; flex:none; display:grid; place-items:center; border:1px dashed var(--line); border-radius:12px; background:var(--input); color:var(--muted); font:600 9px/1.2 "Manrope",sans-serif; text-align:center; overflow:hidden; }
.biz-logo-thumb img { width:100%; height:100%; object-fit:contain; }
.biz-cover-thumb { width:98px; height:56px; flex:none; display:grid; place-items:center; border:1px dashed var(--line); border-radius:12px; background:var(--input); color:var(--muted); font:600 9px/1.2 "Manrope",sans-serif; text-align:center; overflow:hidden; }
.biz-cover-thumb img { width:100%; height:100%; object-fit:cover; }
.biz-cat-order { display:grid; gap:6px; }
.biz-cat-row { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:8px 11px; border:1px solid var(--line); border-radius:11px; background:var(--raised); }
.biz-cat-name { color:var(--text); font:700 12px/1.2 "Manrope",sans-serif; }
.biz-cat-btns { display:flex; gap:6px; }
.biz-cat-btns button { width:34px; height:34px; border:1px solid var(--line); border-radius:9px; background:var(--input); color:var(--text); cursor:pointer; font-size:15px; }
.biz-cat-btns button:disabled { opacity:.3; cursor:default; }
.biz-logo-btn { display:inline-flex; align-items:center; justify-content:center; min-height:40px; padding:0 14px; border:1px solid var(--line); border-radius:11px; background:var(--input); color:var(--text); font:700 12px/1 "Manrope",sans-serif; cursor:pointer; }
.biz-logo-btn:hover { border-color:var(--brand); }
.biz-logo-clear { border:0; background:none; color:var(--muted); font:650 11px/1 "Manrope",sans-serif; text-decoration:underline; cursor:pointer; }

/* ============================================================
   ESCRITORIO: filtros y categorías a la izquierda, productos
   a la derecha (aplica a la lista y a las tiendas)
   ============================================================ */
@media (min-width: 1100px) {
  .catalog-layout {
    display: grid; grid-template-columns: 292px minmax(0, 1fr);
    grid-template-rows: auto auto auto 1fr;
    grid-template-areas: "side status" "side grid" "side empty" "side error";
    column-gap: 26px; align-items: start;
    padding-inline: max(var(--gutter), calc((100% - 1400px) / 2));
  }
  .catalog-layout .controls {
    grid-area: side; position: sticky; top: 12px; margin-top: 14px;
    /* Sin overscroll-behavior:contain — con la rueda del ratón encima del
       panel, el scroll debe pasar a la página cuando el panel no tiene
       más que desplazar; si no, la columna entera se vuelve zona muerta. */
    max-height: calc(100vh - 26px); overflow-y: auto;
    border: 1px solid var(--line); border-radius: 20px; box-shadow: var(--glass-hi);
    padding: 14px 14px 18px; scrollbar-width: thin;
  }
  .catalog-layout .statusbar { grid-area: status; }
  .catalog-layout #grid { grid-area: grid; }
  .catalog-layout #empty { grid-area: empty; }
  .catalog-layout #error { grid-area: error; }
  .catalog-layout .statusbar, .catalog-layout .cat-title, .catalog-layout .grid { padding-inline: 4px; }
  .catalog-layout .chips { flex-direction: column; align-items: stretch; overflow: visible; padding-right: 2px; }
  .catalog-layout .chip { white-space: normal; text-align: left; }
  .catalog-layout .subcontrols { flex-direction: column; align-items: stretch; }
  .catalog-layout .subcontrols .spacer { display: none; }
  .catalog-layout .mini-toggle { text-align: left; }
  .catalog-layout .sort-label select { width: 100%; }
  .catalog-layout .grid { grid-template-columns: repeat(4, 1fr); }
}

/* ===== Tienda: el fondo respira el color de marca del vendedor ===== */
body.storefront .hero-bg::after { background: radial-gradient(60% 55% at 50% 34%, color-mix(in srgb, var(--brand) 17%, transparent), transparent 70%); }
body.storefront .orb-1 { background: color-mix(in srgb, var(--brand) 72%, #000); }
body.storefront .orb-2 { background: var(--brand); }
body.storefront .orb-3 { background: color-mix(in srgb, var(--brand) 34%, #000); }

/* ===== Vista previa real de la tienda en Mi negocio ===== */
.biz-preview-hero { position: relative; z-index: 1; display: grid; justify-items: center; gap: 5px; text-align: center; padding: 6px 0 12px; }
.biz-preview-logo { max-height: 44px; max-width: 150px; object-fit: contain; filter: drop-shadow(0 4px 10px rgba(0,0,0,.25)); }
.biz-preview-hero strong { color: var(--biz-accent, var(--brand)); font: 800 24px/1.1 "Sora", sans-serif; letter-spacing: -.02em; }
.biz-preview-hero span { color: var(--biz-muted, rgba(255,255,255,.62)); font: 600 11.5px/1.4 "Manrope", sans-serif; }
.biz-preview-cta { display: inline-flex; align-items: center; margin-top: 5px; padding: 7px 14px; border-radius: 999px; border: 1.5px solid var(--biz-accent, var(--brand)); color: var(--biz-ink, #fff); font: 800 9.5px/1 "Manrope", sans-serif; letter-spacing: .08em; text-transform: uppercase; font-style: normal; }
.biz-preview-cards { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }
.biz-preview-cards.compact { grid-template-columns: repeat(4, 1fr); }
.biz-preview-cards b { height: 44px; border-radius: 9px; background: color-mix(in srgb, var(--biz-ink, #fff) 9%, transparent); border: 1px solid color-mix(in srgb, var(--biz-ink, #fff) 14%, transparent); }
.biz-preview-cards.compact b { height: 34px; }
.biz-preview-note { position: relative; z-index: 1; margin: 8px 0 0; color: var(--biz-muted, rgba(255,255,255,.62)); font: 650 9.5px/1.4 "Manrope", sans-serif; text-align: center; }

/* ===== Tienda: el nombre en BOLD y en el color de acento del vendedor ===== */
body.storefront .hero-title .grad,
html[data-ui-theme="light"] body.storefront .hero-title .grad {
  font-weight: 800; color: var(--brand); -webkit-text-fill-color: var(--brand);
  animation: none; text-shadow: 0 0 34px color-mix(in srgb, var(--brand) 42%, transparent);
}

/* ===== Botón de contacto junto a "Explorar productos" ===== */
.hero-contact {
  display: inline-flex; align-items: center; gap: 9px; margin: 2px 0 0 10px;
  padding: 13px 22px; border-radius: var(--pill);
  background: var(--brand); border: 1.5px solid transparent; color: var(--on-accent);
  font-family: var(--font-emph); font-weight: 800; font-size: 13px; letter-spacing: .04em; text-transform: uppercase;
  text-decoration: none; transition: transform .15s var(--ease), filter .2s var(--ease);
}
.hero-contact:active { transform: scale(.96); }
@media (hover: hover) { .hero-contact:hover { filter: brightness(1.08); } }
@media (max-width: 540px) { .hero-contact { margin: 10px 0 0; } }

/* En la tienda, el borde y el hover de "Explorar productos" usan el acento
   del vendedor (antes quedaba un verde fijo en tema claro) */
body.storefront .hero-enter,
html[data-ui-theme="light"] body.storefront .hero-enter { border-color: color-mix(in srgb, var(--brand) 60%, transparent); color: var(--text); }
@media (hover: hover) { body.storefront .hero-enter:hover { background: color-mix(in srgb, var(--brand) 10%, transparent); box-shadow: none; } }

/* ============================================================
   PONER PRECIOS · lista rápida
   ============================================================ */
.pricing-sheet { max-width: 720px; width: 100%; }
.pricing-sub { margin: 4px 0 0; color: var(--text-muted); font: 600 12px/1.5 "Manrope", sans-serif; }
.pricing-summary { display: flex; flex-wrap: wrap; gap: 8px 18px; padding: 10px 2px; color: var(--text-muted); font: 650 11.5px/1.4 "Manrope", sans-serif; border-bottom: 1px solid var(--line); }
.pricing-summary b { color: var(--brand-ink); }
.pricing-list { overflow-y: auto; max-height: min(62vh, 640px); padding: 4px 2px 12px; display: grid; gap: 8px; }
.pricing-cat { margin: 12px 0 2px; font: 800 12px/1 "Sora", sans-serif; letter-spacing: .06em; text-transform: uppercase; color: var(--brand-ink); }
.pricing-row { display: grid; grid-template-columns: 44px minmax(0, 1fr) 118px 112px 34px; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 13px; background: var(--raised); transition: border-color .25s ease, background .25s ease; }
.pricing-note-btn { width: 34px; height: 34px; border: 1px solid var(--line); border-radius: 9px; background: transparent; cursor: pointer; font-size: 14px; opacity: .5; }
.pricing-note-btn.has { opacity: 1; border-color: rgba(50,251,0,.4); background: rgba(50,251,0,.08); }
.pricing-note { grid-column: 1 / -1; }
.pricing-note input { width: 100%; min-height: 38px; padding: 0 11px; border: 1.5px dashed var(--line); border-radius: 10px; background: var(--input); color: var(--text); font: 600 12.5px/1 "Manrope", sans-serif; outline: 0; }
.pricing-note input:focus { border-color: var(--brand); border-style: solid; }
.pricing-row.fixed { border-color: rgba(50,251,0,.4); }
.pricing-row.saved { border-color: var(--brand); background: rgba(50,251,0,.08); }
.pricing-thumb { width: 44px; height: 44px; border-radius: 10px; background: #fff; display: grid; place-items: center; overflow: hidden; }
.pricing-thumb img { width: 100%; height: 100%; object-fit: contain; }
.pricing-thumb i { font-style: normal; font-size: 20px; }
.pricing-info { display: grid; gap: 2px; min-width: 0; }
.pricing-info b { font: 750 12.5px/1.3 "Manrope", sans-serif; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.pricing-info small { color: var(--text-muted); font-size: 10.5px; }
.pricing-input input { width: 100%; min-height: 42px; padding: 0 11px; border: 1.5px solid var(--line); border-radius: 11px; background: var(--input); color: var(--text); font: 750 14px/1 "Manrope", sans-serif; outline: 0; }
.pricing-input input:focus { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(50,251,0,.12); }
.pricing-row-out { display: grid; gap: 1px; justify-items: end; text-align: right; font: 700 12px/1.2 "Manrope", sans-serif; }
.pricing-row-out .pos { color: var(--brand-ink); }
.pricing-row-out .neg { color: #ff6961; }
.pricing-row-out small { color: var(--text-muted); font-size: 9.5px; font-weight: 650; }
.pricing-auto { color: var(--text-muted); font-size: 10.5px; font-weight: 650; }
.biz-bulk-btn { width: 100%; margin: 2px 0 4px; }
@media (max-width: 560px) {
  .pricing-row { grid-template-columns: 38px minmax(0, 1fr) 104px 34px; }
  .pricing-row-out { grid-column: 2 / -1; justify-items: start; text-align: left; }
}

/* ===== Tienda: letra del nombre elegida por el vendedor ===== */
body.storefront[data-store-font="elegante"] .hero-title { font-family: "Sora", sans-serif; }
body.storefront[data-store-font="tech"] .hero-title { font-family: "Space Grotesk", sans-serif; }

/* Botón Guardar tienda en la navegación del asistente */
.biz-nav .biz-save { flex: .9; border-color: rgba(50,251,0,.35); color: var(--brand-ink); }

/* Productos con precio fijado cuyo costo mayorista cambió */
.pricing-row.moved { border-color: #ffb020; background: rgba(255,176,32,.08); }
.pricing-moved-note { color: #d98a00; font-weight: 800; }
.pricing-summary .pricing-alert, .pricing-summary .pricing-alert b { color: #d98a00; }

/* Guía de ganancia en el estudio (solo la ve el vendedor; nunca va en la pieza) */
.post-profit-guide { margin-top: 8px; padding: 9px 12px; border-radius: 11px; border: 1px solid var(--line); background: var(--input); color: var(--text-muted); font: 650 12px/1.45 "Manrope", sans-serif; }
.post-profit-guide.pos { border-color: rgba(50,251,0,.35); background: rgba(50,251,0,.08); color: var(--brand-ink); }
.post-profit-guide.neg { border-color: rgba(255,105,97,.45); background: rgba(255,105,97,.08); color: #e04b42; }

/* ===== Mi negocio: tu tienda en números ===== */
.biz-stats-field .biz-label em { color: var(--text-faint); font-style: normal; font-size: 10px; text-transform: none; letter-spacing: 0; }
.biz-stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.biz-stats-grid article { display: grid; gap: 2px; justify-items: center; padding: 11px 6px; border: 1px solid var(--line); border-radius: 12px; background: var(--input); text-align: center; }
.biz-stats-grid strong { font: 800 19px/1 "Sora", sans-serif; color: var(--brand-ink); }
.biz-stats-grid span { color: var(--text-muted); font: 700 9px/1.2 "Manrope", sans-serif; text-transform: uppercase; letter-spacing: .05em; }
.biz-stats-top { margin-top: 10px; display: grid; gap: 6px; }
.biz-stats-top > small { color: var(--text-muted); font: 800 9.5px/1 "Manrope", sans-serif; text-transform: uppercase; letter-spacing: .07em; }
.biz-stats-product { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 11px; border: 1px solid var(--line); border-radius: 10px; background: var(--input); font: 650 11.5px/1.3 "Manrope", sans-serif; }
.biz-stats-product b { color: var(--brand-ink); white-space: nowrap; }
@media (max-width: 480px) { .biz-stats-grid { grid-template-columns: repeat(2, 1fr); } }

/* ===== Equilibrio del hero en escritorio =====
   La tarjeta de invitar vive en la columna izquierda, bajo los botones:
   así ambas columnas pesan parecido y cada lado tiene un propósito claro. */
.invite-promo { text-align: left; margin-top: 18px; }
.hero-copy .invite-promo { max-width: 520px; }
@media (max-width: 900px) { .hero-copy .invite-promo { margin-left: auto; margin-right: auto; } }

/* ============================================================
   ENTRADA TIPO APP · para miembros
   El landing del miembro va al grano: saludo → buscador → lista.
   El discurso completo queda solo para visitantes sin acceso.
   ============================================================ */
.member-greeting { display: grid; gap: 5px; margin: 4px 0 2px; }
.member-greeting b { color: var(--text); font: 800 clamp(30px, 5vw, 44px)/1.08 "Sora", sans-serif; letter-spacing: -.03em; }
.member-greeting span { color: var(--text-muted); font: 600 13.5px/1.4 "Manrope", sans-serif; }
/* Aviso de seguimientos: lo primero que ve el vendedor al entrar cuando
   hay clientes a los que les prometió volver a escribir. */
.greet-agenda {
  display: flex; align-items: center; gap: 9px; width: 100%; margin-top: 9px; padding: 11px 13px;
  border: 1px solid rgba(245,179,1,.4); border-radius: 14px; background: rgba(245,179,1,.1);
  color: var(--text); cursor: pointer; text-align: left;
}
.greet-agenda > span { flex: none; font-size: 17px; line-height: 1; }
.greet-agenda b { min-width: 0; flex: 1; color: var(--text); font: 750 12.5px/1.3 "Manrope", sans-serif; letter-spacing: 0; }
.greet-agenda i { flex: none; color: var(--text-muted); font-style: normal; font-size: 14px; }
.greet-agenda.late { border-color: rgba(255,77,77,.45); background: rgba(255,77,77,.1); }
.greet-agenda:active { transform: scale(.99); }

body.member:not(.storefront) .hero-title,
body.member:not(.storefront) .hero-tagline,
body.member:not(.storefront) .hero-support,
body.member:not(.storefront) .hero-stats,
body.member:not(.storefront) .hero-enter,
body.member:not(.storefront) #heroContact,
body.member:not(.storefront) .invite-promo,
body.member:not(.storefront) .hero-tools { display: none; }
body.member:not(.storefront) .hero { padding-top: 20px; padding-bottom: 6px; }
body.member:not(.storefront) .hero-inner { display: block; max-width: var(--maxw); }
body.member:not(.storefront) .hero-brandrow { justify-content: flex-start; margin-bottom: 16px; }
/* espacio para que la barra fija no tape el final de la página */
body.member:not(.storefront) { padding-bottom: calc(86px + env(safe-area-inset-bottom, 0px)); }

/* ---- Barra de navegación fija (Lista · Crear pieza · Mi negocio · Más) ---- */
.app-bar {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: calc(10px + env(safe-area-inset-bottom, 0px)); z-index: 55;
  display: none; align-items: stretch; gap: 4px; padding: 7px;
  border: 1px solid var(--line); border-radius: 22px;
  background: color-mix(in srgb, var(--surface) 84%, transparent);
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  box-shadow: 0 18px 44px rgba(0,0,0,.35);
}
body.member:not(.storefront) .app-bar { display: flex; }
/* Con cualquier ventana abierta, la barra se esconde: sus botones de abajo
   (Ahora no, Cerrar…) siempre quedan libres para tocar. */
body.no-scroll .app-bar { display: none !important; }
.app-bar-btn { min-width: 74px; display: grid; justify-items: center; gap: 4px; padding: 8px 10px; border: 0; border-radius: 16px; background: transparent; color: var(--text-muted); cursor: pointer; }
.app-bar-btn span { font-size: 20px; line-height: 1; }
.app-bar-btn small { font: 750 9.5px/1 "Manrope", sans-serif; letter-spacing: .02em; }
.app-bar-btn:active { transform: scale(.94); }
@media (hover: hover) { .app-bar-btn:hover { background: rgba(50,251,0,.09); color: var(--text); } }
@media (max-width: 420px) { .app-bar-btn { min-width: 64px; padding: 8px 6px; } }

/* ---- Menú "Más" ---- */
.more-sheet { max-width: 520px; }
.more-list { display: grid; gap: 8px; padding: 16px 18px calc(20px + var(--safe-bottom)); overflow-y: auto; }
.more-list > * { display: flex; align-items: center; gap: 13px; width: 100%; padding: 12px 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--raised); color: var(--text); text-decoration: none; text-align: left; cursor: pointer; }
.more-list > * > span { width: 26px; flex: none; font-size: 20px; text-align: center; }
.more-list b { display: block; color: var(--text); font: 750 13px/1.2 "Sora", sans-serif; }
.more-list small { display: block; margin-top: 2px; color: var(--text-muted); font: 500 11px/1.35 "Manrope", sans-serif; }
.more-list > *:active { transform: scale(.985); }
@media (hover: hover) { .more-list > *:hover { border-color: var(--brand); } }
.more-version { display: block; padding-top: 4px; color: var(--text-faint); font: 600 10px/1 "Manrope", sans-serif; text-align: center; }

/* ===================== MI LISTA DE PRECIOS ===================== */
.mylist-sheet { max-width: 620px; }
.mylist-body { padding: 4px 18px calc(20px + var(--safe-bottom)); overflow-y: auto; }
.mylist-intro { margin: 0 0 14px; color: var(--text-muted); font: 500 13px/1.55 "Manrope", sans-serif; }
.mylist-intro b { color: var(--text); }

.mylist-fields {
  margin-bottom: 14px; border: 1px solid var(--line); border-radius: 14px;
  background: var(--raised); overflow: hidden;
}
.mylist-fields > summary {
  padding: 12px 14px; cursor: pointer; color: var(--text);
  font: 700 12.5px/1 "Manrope", sans-serif; list-style: none;
}
.mylist-fields > summary::-webkit-details-marker { display: none; }
.mylist-fields[open] > summary { border-bottom: 1px solid var(--line-2); }
.mylist-fields .biz-field { padding: 0 14px; margin-top: 12px; }
.mylist-fields .biz-hint { padding: 0 14px 14px; margin-top: 8px; }

.mylist-generate { width: 100%; }
.mylist-message { min-height: 18px; margin: 10px 0 0; color: var(--text-muted); font: 600 12px/1.4 "Manrope", sans-serif; text-align: center; }
.mylist-message.error { color: var(--danger); }

.mylist-result { margin-top: 16px; }
.mylist-audit { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 11px; }
.mylist-audit span {
  padding: 5px 10px; border-radius: var(--pill); background: var(--raised);
  color: var(--text-muted); font: 600 11px/1.2 "Manrope", sans-serif;
}
.mylist-audit b { color: var(--text); font-weight: 800; }
.mylist-audit .muted { opacity: .72; }

.mylist-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.mylist-tab {
  padding: 7px 13px; border: 1px solid var(--line); border-radius: var(--pill);
  background: transparent; color: var(--text-muted); cursor: pointer;
  font: 700 11.5px/1 "Manrope", sans-serif;
}
.mylist-tab.active { border-color: var(--brand); background: rgba(50,251,0,.12); color: var(--text); }

.mylist-output {
  width: 100%; min-height: 300px; padding: 14px; resize: vertical;
  border: 1px solid var(--line); border-radius: 14px; background: var(--input); color: var(--text);
  font: 500 12.5px/1.55 ui-monospace, "SF Mono", Menlo, monospace; white-space: pre-wrap;
}
.mylist-output:focus { outline: none; border-color: var(--brand); }
.mylist-editable { margin: 8px 0 0; color: var(--text-faint); font: 500 11px/1.4 "Manrope", sans-serif; text-align: center; }
.mylist-actions { display: flex; gap: 9px; margin-top: 13px; }
.mylist-actions .btn-ghost { flex: none; }
.mylist-actions .btn-wa { flex: 1; }

/* ===================== MI AGENDA ===================== */
/* Contador de seguimientos pendientes: en el menú va al final de la
   fila, en el atajo del héroe flota en la esquina. */
/* Contador rojo de pendientes. Va acotado a los botones de herramientas
   porque .hero-badge también lo usa la píldora "En vivo" del encabezado,
   que no debe volverse un contador. */
.more-badge, .hero-share .hero-badge {
  display: grid; place-items: center; min-width: 21px; height: 21px; padding: 0 6px; border-radius: var(--pill);
  background: var(--danger); color: #fff; font: 800 11px/1 "Manrope", sans-serif; font-style: normal;
}
.more-list > * > .more-badge { margin-left: auto; flex: none; }
.hero-tools .hero-share .hero-badge { position: absolute; top: 9px; right: 9px; }
.hero-tools .hero-share { position: relative; }

.agenda-sheet, .agenda-form-sheet { max-width: 560px; }
.agenda-body { padding: 4px 18px 8px; overflow-y: auto; }

.agenda-alert {
  margin: 0 0 12px; padding: 11px 13px; border-radius: 12px;
  border-left: 3px solid var(--danger); background: rgba(239,68,68,.09);
  color: var(--text); font: 700 12.5px/1.45 "Manrope", sans-serif;
}

.agenda-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 12px; }
.agenda-kpi {
  display: grid; gap: 2px; padding: 11px 8px; border: 1px solid var(--line); border-radius: 14px;
  background: var(--raised); text-align: center;
}
.agenda-kpi b { color: var(--text); font: 800 21px/1 "Sora", sans-serif; }
.agenda-kpi small { color: var(--text-muted); font: 600 10.5px/1.2 "Manrope", sans-serif; }
.agenda-kpi.urgent { border-color: rgba(239,68,68,.5); background: rgba(239,68,68,.08); }
.agenda-kpi.urgent b { color: var(--danger); }
.agenda-kpi.good b { color: var(--brand); }

.agenda-filters { display: flex; gap: 7px; margin-bottom: 12px; }
.agenda-chip {
  flex: 1; min-width: 0; padding: 9px 6px; border: 1px solid var(--line); border-radius: var(--pill);
  background: transparent; color: var(--text-muted); cursor: pointer;
  font: 700 11.5px/1 "Manrope", sans-serif; white-space: nowrap; overflow: hidden;
}
.agenda-chip.active { border-color: var(--brand); background: rgba(50,251,0,.12); color: var(--text); }

.agenda-list { display: grid; gap: 10px; }
.agenda-card {
  padding: 13px 14px; border: 1px solid var(--line); border-radius: 16px; background: var(--raised);
  border-left: 3px solid transparent;
}
.agenda-card.late { border-left-color: var(--danger); }
.agenda-card.today { border-left-color: var(--warn); }
.agenda-card-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.agenda-card-name { min-width: 0; color: var(--text); font: 750 14px/1.25 "Sora", sans-serif; overflow-wrap: anywhere; }
.agenda-status {
  flex: none; padding: 4px 9px; border-radius: var(--pill);
  font: 800 9.5px/1 "Manrope", sans-serif; text-transform: uppercase; letter-spacing: .04em;
}
.agenda-status.nuevo    { background: rgba(56,189,248,.16); color: #38bdf8; }
.agenda-status.cotizado { background: rgba(212,167,44,.18); color: #d4a72c; }
.agenda-status.cerrado  { background: rgba(50,251,0,.16); color: var(--brand); }
.agenda-status.perdido  { background: var(--line); color: var(--text-muted); }
.agenda-card-interest { margin: 7px 0 0; color: var(--text-body); font: 600 12.5px/1.4 "Manrope", sans-serif; }
.agenda-card-amount { margin: 3px 0 0; color: var(--text); font: 800 15px/1.2 "Sora", sans-serif; }
.agenda-card-note { margin: 6px 0 0; color: var(--text-muted); font: 500 12px/1.45 "Manrope", sans-serif; overflow-wrap: anywhere; }
.agenda-card-due { margin: 7px 0 0; color: var(--text-muted); font: 700 11.5px/1.3 "Manrope", sans-serif; }
.agenda-card-due.late { color: var(--danger); }
.agenda-card-due.today { color: var(--warn); }
.agenda-card-actions { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 11px; }
.agenda-act {
  flex: 1; min-width: 92px; padding: 9px 8px; border: 1.5px solid var(--line); border-radius: var(--radius-md);
  background: transparent; color: var(--text-body); cursor: pointer;
  font: 700 11.5px/1 "Manrope", sans-serif; white-space: nowrap; overflow: hidden;
}
.agenda-act.primary { border-color: var(--brand); background: rgba(50,251,0,.12); color: var(--text); }
.agenda-act:active { transform: scale(.96); }
@media (hover: hover) { .agenda-act:hover { border-color: var(--brand); } }

.agenda-empty { padding: 22px 6px; color: var(--text-muted); text-align: center; font: 500 13px/1.5 "Manrope", sans-serif; }
.agenda-empty-start { display: grid; justify-items: center; gap: 6px; padding: 26px 14px; text-align: center; }
.agenda-empty-start span { font-size: 40px; line-height: 1; }
.agenda-empty-start b { color: var(--text); font: 800 16px/1.2 "Sora", sans-serif; }
.agenda-empty-start p { margin: 0; max-width: 330px; color: var(--text-muted); font: 500 12.5px/1.55 "Manrope", sans-serif; }

.agenda-privacy { margin: 16px 0 0; color: var(--text-faint); font: 500 11px/1.5 "Manrope", sans-serif; text-align: center; }
.agenda-foot { padding: 12px 18px calc(18px + var(--safe-bottom)); border-top: 1px solid var(--line-2); }
.agenda-foot .btn-wa { width: 100%; }

.agenda-form { padding: 4px 18px calc(18px + var(--safe-bottom)); overflow-y: auto; }
.agenda-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.agenda-note { resize: vertical; min-height: 66px; font-family: "Manrope", sans-serif; }
.agenda-form-foot { display: flex; gap: 9px; margin-top: 16px; }
.agenda-form-foot .btn-wa { flex: 1; }
.agenda-delete { flex: none; }
@media (max-width: 380px) { .agenda-form-row { grid-template-columns: 1fr; } }

/* ===== Miniaturas de plantilla con el motor real ===== */
.lib-thumb { position: absolute; inset: 0; width: 100%; height: 100%; display: block; border-radius: inherit; }

/* ===== Desliza para actualizar ===== */
/* Solo en pantallas táctiles (existe únicamente para el gesto de "desliza
   para actualizar"). En computador no debe tocar el comportamiento de la
   rueda del ratón bajo ninguna circunstancia. */
@media (pointer: coarse) { html, body { overscroll-behavior-y: contain; } }
.ptr {
  position: fixed; top: -56px; left: 50%; transform: translateX(-50%); z-index: 55;
  width: 46px; height: 46px; border-radius: 50%;
  background: var(--raised, #161616); border: 1.5px solid var(--line, #2a2a2a);
  display: grid; place-items: center; box-shadow: 0 12px 30px rgba(0,0,0,.4);
  opacity: 0; pointer-events: none; transition: opacity .15s;
}
.ptr.show { opacity: 1; }
.ptr.ready { border-color: var(--brand); box-shadow: 0 0 18px rgba(50,251,0,.35); }
.ptr-ico { font-size: 22px; color: var(--text-muted, #999); line-height: 1; transition: color .15s; }
.ptr.ready .ptr-ico { color: var(--brand); }
.ptr.loading .ptr-ico { animation: ptrSpin .7s linear infinite; color: var(--brand); }
@keyframes ptrSpin { to { transform: rotate(360deg); } }

/* ===== Mi negocio: vista previa siempre visible + opciones con mini-mockup ===== */
/* La vista previa iba flotando SOBRE los controles (sticky abajo) y tapaba
   los campos que la persona estaba usando: se leía como un error. Ahora
   encabeza el formulario y los controles pasan por debajo, que es donde se
   espera un panel de vista previa. */
.biz-preview-dock { position: sticky; top: -1px; z-index: 6; margin: 0 0 14px; padding-top: 8px; background: var(--surface); }
.biz-preview-dock::after { content: ""; position: absolute; left: 0; right: 0; bottom: -12px; height: 12px; background: linear-gradient(var(--surface), transparent); pointer-events: none; }
.biz-preview-dock .biz-preview { margin: 0; min-height: 104px; padding: 13px 18px 11px; box-shadow: var(--shadow); }
.biz-preview-dock .biz-preview-hero { padding: 2px 0 8px; gap: 4px; }
.biz-preview-dock .biz-preview-hero strong { font-size: 20px; }
.biz-preview-dock .biz-preview-logo { max-height: 30px; }

.post-fmt.biz-viz { display: flex; flex-direction: column; align-items: center; gap: 7px; padding: 10px 14px; }
.biz-mini { display: block; width: 76px; height: 46px; border-radius: 8px; padding: 5px 6px; overflow: hidden; border: 1px solid rgba(255,255,255,.14); }
.biz-mini.dark { background: #0c0c0c; }
.biz-mini.light { background: #f2f3f5; border-color: rgba(0,0,0,.14); }
.biz-mini b { display: block; width: 58%; height: 6px; margin: 2px auto 6px; border-radius: 3px; background: var(--biz-accent, var(--brand)); }
.biz-mini .cards { display: grid; gap: 3px; }
.biz-mini.grande .cards { grid-template-columns: 1fr 1fr; }
.biz-mini.compacta .cards { grid-template-columns: repeat(4, 1fr); }
.biz-mini .cards i { display: block; height: 20px; border-radius: 3px; background: rgba(255,255,255,.16); }
.biz-mini.compacta .cards i { height: 10px; }
.biz-mini.light .cards i { background: rgba(0,0,0,.12); }

/* Los botones de letra muestran su propia tipografía */
#bizFont [data-font="moderna"]  { font-family: "Manrope", sans-serif; font-weight: 800; }
#bizFont [data-font="elegante"] { font-family: "Sora", sans-serif; font-weight: 700; }
#bizFont [data-font="tech"]     { font-family: "Space Grotesk", sans-serif; font-weight: 700; }

/* Con la barra de navegación flotante presente, la hoja de "Mi negocio" se
   apoya por encima de ella: así los botones Atrás/Continuar y la vista previa
   fija (bottom: 100px, justo sobre esos botones) nunca quedan tapados. */
body.member:not(.storefront) #bizModal .modal-sheet {
  margin-bottom: calc(94px + env(safe-area-inset-bottom, 0px));
  max-height: calc(100vh - 118px);
  border-radius: 24px;
  border-bottom: 1px solid var(--line);
}

/* ===== Compartir categoría completa ===== */
.cat-share { margin-left: auto; padding: 7px 12px; border: 1px solid rgba(50,251,0,.35); border-radius: 999px; background: rgba(50,251,0,.08); color: var(--brand-ink); font: 750 10px/1 "Manrope", sans-serif; letter-spacing: .03em; cursor: pointer; white-space: nowrap; text-transform: none; }
.cat-share:active { transform: scale(.96); }
@media (hover: hover) { .cat-share:hover { background: rgba(50,251,0,.16); border-color: var(--brand); } }
.catshare-sheet { max-width: 480px; }
.catshare-body { display: grid; gap: 10px; padding: 16px 18px calc(20px + var(--safe-bottom)); }
.catshare-note { margin: 0; padding: 9px 12px; border-radius: 10px; background: rgba(50,251,0,.07); color: var(--text-body); font: 600 12px/1.5 "Manrope", sans-serif; }
.catshare-count { color: var(--text-faint); font: 600 10.5px/1.3 "Manrope", sans-serif; text-align: center; }

/* ===== Combo: vitrina navegable de productos ===== */
.offer-cats { display: flex; gap: 6px; overflow-x: auto; padding: 2px 0 8px; scrollbar-width: none; }
.offer-cats::-webkit-scrollbar { display: none; }
.offer-cat { flex: none; padding: 8px 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--raised); color: var(--text-muted); font: 700 11px/1 "Manrope", sans-serif; cursor: pointer; white-space: nowrap; }
.offer-cat.active { border-color: var(--brand); background: rgba(50,251,0,.1); color: var(--brand-ink); }
.offer-browse { display: grid; gap: 6px; max-height: 250px; overflow-y: auto; padding: 2px; margin-bottom: 10px; scrollbar-width: thin; }
.offer-pick { display: grid; grid-template-columns: 40px minmax(0,1fr) auto; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 12px; background: var(--raised); color: var(--text); text-align: left; cursor: pointer; transition: border-color .15s; }
.offer-pick-thumb { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 9px; background: #fff; overflow: hidden; font-size: 18px; }
.offer-pick-thumb img { width: 100%; height: 100%; object-fit: contain; }
.offer-pick-name { font: 650 12px/1.3 "Manrope", sans-serif; }
.offer-pick-price { color: var(--brand-ink); font: 800 12px/1 "Manrope", sans-serif; white-space: nowrap; }
.offer-pick.added { opacity: .5; cursor: default; }
.offer-pick:not(.added):active { transform: scale(.985); }
@media (hover: hover) { .offer-pick:not(.added):hover { border-color: var(--brand); } }

/* ===== Tour: tu herramienta de venta ===== */
.tour-sheet { position: relative; max-width: 440px; overflow: hidden; }
.tour-close { position: absolute; top: 10px; right: 10px; z-index: 2; }
.tour-body { display: grid; justify-items: center; gap: 11px; padding: 38px 26px 6px; text-align: center; }
.tour-icon { font-size: 54px; line-height: 1; }
.tour-body h2 { margin: 0; color: var(--text); font: 800 22px/1.15 "Sora", sans-serif; letter-spacing: -.02em; }
.tour-body p { margin: 0; max-width: 330px; color: var(--text-muted); font: 500 13.5px/1.6 "Manrope", sans-serif; }
.tour-foot { display: grid; gap: 12px; padding: 16px 22px calc(22px + var(--safe-bottom)); }
.tour-dots { display: flex; justify-content: center; gap: 6px; }
.tour-dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--line); }
.tour-dots i.on { background: var(--brand); }
.tour-actions { display: grid; gap: 8px; }

/* ===== Pieza al toque: hoja de variantes =====
   (el botón .btn-piece de la tarjeta se estiliza junto a .btn-add) */
.piece-sheet { max-width: 520px; }
.piece-body { padding: 4px 18px calc(20px + var(--safe-bottom)); overflow-y: auto; }
.piece-name { margin: 0 0 4px; color: var(--text); font: 750 14px/1.35 "Manrope", sans-serif; }
.piece-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 12px 0 14px; }
.piece-loading { grid-column: 1 / -1; text-align: center; padding: 34px 0; }
.piece-variant { position: relative; display: grid; gap: 6px; padding: 8px 8px 10px; border: 2px solid var(--line); border-radius: 16px; background: var(--raised); cursor: pointer; transition: border-color .15s, transform .15s; }
.piece-variant canvas { width: 100%; height: auto; display: block; border-radius: 10px; }
.piece-variant span { color: var(--text-muted); font: 700 11px/1.2 "Manrope", sans-serif; text-align: center; }
.piece-variant.active { border-color: var(--brand); }
.piece-variant.active::after { content: "✓"; position: absolute; top: 6px; right: 6px; width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; background: var(--brand); color: #04140a; font-size: 13px; font-weight: 800; }
.piece-variant.active span { color: var(--brand-ink); }
.piece-variant:active { transform: scale(.98); }
.piece-actions { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
.piece-actions .btn-wa, .piece-actions .btn-ghost { justify-content: center; }
@media (max-width: 420px) { .piece-actions { grid-template-columns: 1fr; } }

/* ===== Revisión antes de exportar ===== */
.audit-sheet { max-width: 440px; }
.audit-body { padding: 4px 20px calc(20px + var(--safe-bottom)); }
.audit-list { margin: 10px 0 16px; padding: 0 0 0 4px; list-style: none; display: grid; gap: 9px; }
.audit-list li { position: relative; padding: 10px 12px 10px 34px; border: 1px solid rgba(255,176,32,.4); border-radius: 12px; background: rgba(255,176,32,.08); color: var(--text-body); font: 600 12.5px/1.5 "Manrope", sans-serif; }
.audit-list li::before { content: "⚠️"; position: absolute; left: 10px; top: 10px; font-size: 13px; }
.audit-actions { display: grid; gap: 8px; }

/* ===== Kit de marca: muestras sacadas del logo ===== */
.post-sw-brand { position: relative; box-shadow: 0 0 0 2px rgba(255,255,255,.14); }
.post-sw-brand::after { content: ""; position: absolute; right: -1px; bottom: -1px; width: 9px; height: 9px; border-radius: 50%; background: #fff; border: 2px solid var(--surface); }

/* ===== Calendario de ventas: propuesta del momento ===== */
.season-banner { display: flex; align-items: center; gap: 12px; margin: 14px 0 4px; padding: 12px 14px; border: 1px solid rgba(50,251,0,.3); border-radius: 18px; background: linear-gradient(120deg, rgba(50,251,0,.12), rgba(50,251,0,.04)); }
.season-ico { flex: none; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 12px; background: rgba(50,251,0,.14); font-size: 20px; }
.season-txt { flex: 1; min-width: 0; display: grid; gap: 2px; }
.season-txt b { color: var(--text); font: 800 13.5px/1.2 "Manrope", sans-serif; }
.season-txt small { color: var(--text-muted); font: 600 11.5px/1.35 "Manrope", sans-serif; }
.season-go { flex: none; padding: 9px 14px; border: 0; border-radius: 999px; background: var(--brand); color: #04140a; font: 800 11.5px/1 "Manrope", sans-serif; cursor: pointer; }
.season-go:active { transform: scale(.95); }
.season-x { flex: none; width: 26px; height: 26px; border: 0; border-radius: 50%; background: transparent; color: var(--text-faint); font-size: 13px; cursor: pointer; }
@media (hover: hover) { .season-x:hover { background: var(--raised); color: var(--text); } }
@media (max-width: 420px) { .season-banner { flex-wrap: wrap; } .season-go { width: 100%; padding: 11px; } .season-x { position: absolute; right: 10px; top: 10px; } .season-banner { position: relative; } }

/* ===== Sin resultados: sugerencias tocables ===== */
.empty-suggestions { display: grid; gap: 7px; width: min(420px, 100%); margin: 4px auto 10px; }
.empty-suggestion { display: grid; grid-template-columns: 38px minmax(0,1fr) auto; align-items: center; gap: 10px; padding: 8px 11px; border: 1px solid var(--line); border-radius: 13px; background: var(--raised); color: var(--text); text-align: left; cursor: pointer; }
.empty-suggestion-thumb { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 9px; background: #fff; overflow: hidden; font-size: 17px; }
.empty-suggestion-thumb img { width: 100%; height: 100%; object-fit: contain; }
.empty-suggestion-name { font: 650 12px/1.3 "Manrope", sans-serif; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.empty-suggestion b { color: var(--brand-ink); font: 800 12px/1 "Manrope", sans-serif; white-space: nowrap; }
.empty-suggestion:active { transform: scale(.985); }
@media (hover: hover) { .empty-suggestion:hover { border-color: var(--brand); } }

/* ===== Elegir producto para la pieza ===== */
.pick-sheet { max-width: 520px; }
.pick-body { display: grid; gap: 10px; padding: 4px 18px calc(18px + var(--safe-bottom)); overflow-y: auto; }
.pick-list { max-height: min(52vh, 420px); }
.piece-head { display: flex; align-items: center; gap: 10px; margin: 0 0 4px; }
.piece-change { flex: none; padding: 6px 12px; border: 1px solid var(--line); border-radius: 999px; background: transparent; color: var(--text-muted); font: 700 11px/1 "Manrope", sans-serif; cursor: pointer; }
@media (hover: hover) { .piece-change:hover { border-color: var(--brand); color: var(--brand-ink); } }

/* ===== Tu día de ventas: lo primero que ve el vendedor ===== */
.seller-today { display: grid; gap: 10px; margin-top: 14px; }
.today-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.today-stat { display: grid; justify-items: center; gap: 2px; padding: 12px 6px 11px; border: 1px solid var(--line); border-radius: 16px; background: var(--raised); text-align: center; }
.today-stat span { font-size: 17px; line-height: 1; opacity: .85; }
.today-stat b { color: var(--text); font: 800 21px/1.05 "Sora", sans-serif; letter-spacing: -.02em; }
.today-stat small { color: var(--text-muted); font: 650 10px/1.25 "Manrope", sans-serif; }
.today-stat.hot { border-color: rgba(255,140,0,.4); background: linear-gradient(160deg, rgba(255,140,0,.12), transparent 70%); }
.today-stat.hot b { color: #ff9d2e; }
.today-stat.urgent { border-color: rgba(255,176,32,.45); background: linear-gradient(160deg, rgba(255,176,32,.12), transparent 70%); }
.today-stat.urgent b { color: #ffb020; }
.today-stat.good { border-color: rgba(50,251,0,.32); background: linear-gradient(160deg, rgba(50,251,0,.1), transparent 70%); }
.today-stat.good b { color: var(--brand-ink); }

.today-action { display: flex; align-items: center; gap: 12px; width: 100%; padding: 13px 16px; border: 0; border-radius: 18px; background: var(--brand); color: #04140a; cursor: pointer; text-align: left; transition: transform .15s var(--ease); }
.today-action-txt { flex: 1; min-width: 0; display: grid; gap: 1px; }
.today-action small { font: 700 9.5px/1 "Manrope", sans-serif; letter-spacing: .09em; text-transform: uppercase; opacity: .68; }
.today-action b { font: 800 14px/1.25 "Manrope", sans-serif; }
.today-action i { font-style: normal; font-size: 17px; font-weight: 800; }
.today-action:active { transform: scale(.98); }
@media (max-width: 359px) { .today-stat b { font-size: 18px; } .today-stat small { font-size: 9px; } }
.today-action em { font-style: normal; font: 600 11px/1.3 "Manrope", sans-serif; opacity: .72; }

/* ===== Puerta visible a "Mi lista de precios" =====
   Va junto al saludo porque es donde aterriza el vendedor: dentro de
   "Mi negocio" quedaba a dos toques y nadie la encontraba. */
.hero-mylist {
  width: 100%; display: none; align-items: center; gap: 14px; margin: 10px 0;
  padding: 16px 18px; border: 1px solid rgba(50,251,0,.34); border-radius: 20px;
  background: linear-gradient(135deg, rgba(50,251,0,.16), rgba(50,251,0,.05) 62%), var(--surface);
  color: var(--text); text-align: left; cursor: pointer;
  box-shadow: 0 12px 34px rgba(0,0,0,.16); transition: transform .16s ease, border-color .16s ease;
}
body.member:not(.storefront) .hero-mylist { display: flex; }
.hero-mylist:hover { border-color: var(--brand); transform: translateY(-1px); }
.hero-mylist:active { transform: scale(.99); }
.hero-mylist-ico { flex: none; font-size: 30px; line-height: 1; }
.hero-mylist-copy { flex: 1 1 auto; min-width: 0; display: grid; gap: 3px; }
.hero-mylist-copy b { font-family: var(--font-emph); font-size: 16px; }
.hero-mylist-copy small { color: var(--text-muted); font-size: 12px; line-height: 1.45; }
.hero-mylist-copy small b { color: var(--brand); font-size: 12px; }
.hero-mylist-go { flex: none; color: var(--brand); font-size: 20px; font-weight: 800; }
@media (max-width: 520px) {
  .hero-mylist { padding: 14px; gap: 11px; }
  .hero-mylist-ico { font-size: 26px; }
  .hero-mylist-copy b { font-size: 15px; }
}

/* Aviso al vendedor: referencias sin categoría, por donde se cuela una fila
   que no es del catálogo. Se nombran para poder quitarlas antes de enviar. */
.mylist-warning { display: grid; gap: 5px; padding: 12px 14px; border: 1px solid rgba(255,176,32,.45); border-radius: 14px; background: rgba(255,176,32,.1); }
.mylist-warning b { color: #d98a00; font-size: 12.5px; }
.mylist-warning span { color: var(--text-muted); font-size: 11.5px; line-height: 1.5; }
.mylist-warning i { color: var(--text); font-size: 11px; font-style: normal; font-weight: 700; }
.mylist-audit .warn { color: #d98a00; font-weight: 800; }

/* ===== Menú "Más": agrupado por para qué sirve, no una lista plana ===== */
/* Los encabezados heredaban el estilo de tarjeta de .more-list > * y parecían
   botones. Son rótulos: sin caja, sin borde, sin dedo. */
.more-list > .more-group {
  display: block; width: auto; margin: 12px 4px 0; padding: 0;
  border: 0; background: none; cursor: default;
  color: var(--text-faint); font: 800 9.5px/1 "Manrope", sans-serif;
  letter-spacing: .1em; text-transform: uppercase;
}
.more-list > .more-group:first-child { margin-top: 0; }

/* El miembro ya tiene la barra fija con logo, "En vivo", tema y actualizar:
   la del encabezado repetía los mismos tres controles justo encima. */
body.member:not(.storefront) .hero-brandrow { display: none; }
.notification-card { position: relative; }
.notification-card button.notification-later {
  position: absolute; top: 6px; right: 6px;
  min-height: 0; width: 24px; height: 24px; padding: 0;
  border: 0; border-radius: 50%; background: transparent;
  color: var(--text-faint); font: 700 11px/1 "Manrope", sans-serif; cursor: pointer;
}
@media (hover: hover) { .notification-card button.notification-later:hover { background: var(--glass-2); color: var(--text); } }

/* ============================================================
   ESCRITORIO · el encabezado se alinea con el listado
   ------------------------------------------------------------
   El catálogo usa un contenedor de 1400px y el encabezado usaba
   --maxw (1180px): los bordes no coincidían, y cada tarjeta
   ocupaba una fila entera de 1400px con tres palabras adentro.
   Ahora: a la izquierda lo del día, a la derecha una columna de
   apoyo del mismo ancho que el panel de filtros de abajo, para
   que las dos zonas compartan eje.
   ============================================================ */
.hero-side { display: grid; gap: 12px; align-content: start; }

@media (min-width: 1100px) {
  body.member:not(.storefront) .hero {
    padding-inline: max(var(--gutter), calc((100% - 1400px) / 2));
  }
  body.member:not(.storefront) .hero-inner {
    display: grid; max-width: 1400px;
    /* 292px y 26px son los mismos valores del panel de filtros del catálogo */
    grid-template-columns: minmax(0, 1fr) 292px;
    column-gap: 26px; row-gap: 14px; align-items: start;
  }
  body.member:not(.storefront) .hero-copy { grid-column: 1; grid-row: 1; }
  body.member:not(.storefront) .hero-side { grid-column: 2; grid-row: 1; }
  body.member:not(.storefront) .community-invite { grid-column: 1 / -1; grid-row: 2; max-width: none; margin: 6px 0 0; }
  body.member:not(.storefront) .today-action { padding: 15px 18px; }
  /* En columna estrecha las tarjetas se apilan. La flecha, que en una fila
     va al final, quedaba sola en un renglón como si sobrara: pasa a la
     esquina superior, que es donde se espera en una tarjeta. */
  body.member:not(.storefront) .hero-side .hero-mylist,
  body.member:not(.storefront) .hero-side .install-card,
  body.member:not(.storefront) .hero-side .notification-card { position: relative; flex-wrap: wrap; }
  body.member:not(.storefront) .hero-side .hero-mylist-go {
    position: absolute; top: 12px; right: 14px; margin: 0;
  }
}

/* En pantallas muy anchas el texto no se estira de borde a borde */
@media (min-width: 1400px) {
  body.member:not(.storefront) #greetLive,
  body.member:not(.storefront) .today-action b { max-width: 62ch; }
}

/* ============================================================
   LEGIBILIDAD · los textos de apoyo eran demasiado tenues
   ------------------------------------------------------------
   Los rótulos de 9,5–10,5px iban en --text-muted (y algunos con
   opacidad encima), lo que en el móvil, a plena luz, se volvía
   difícil de leer. Suben a --text-body y crecen un punto.
   ============================================================ */
.install-card-copy small,
.notification-card-copy small { color: var(--text-body); font-size: 11px; line-height: 1.4; }
.season-txt small { color: var(--text-body); }
.hero-mylist-copy small { color: var(--text-body); font-size: 12.5px; }
.today-stat small { color: var(--text-body); font-size: 10.5px; }
/* Sobre el verde saturado, la opacidad rebajaba mucho el contraste */
.today-action small { font-size: 10px; opacity: .8; }
.today-action em { opacity: .88; font-size: 11.5px; }
@media (max-width: 359px) { .today-stat small { font-size: 9.5px; } }

/* El texto de marca dentro de la tarjeta de lista propia debe destacar
   sin perder el contraste del párrafo que lo rodea */
html[data-ui-theme="light"] .hero-mylist-copy small b { color: var(--brand-ink); }

/* ===== Vista previa: franja compacta que no estorba ===== */
.biz-preview-dock.compacta .biz-preview { min-height: 0; padding: 9px 14px; }
.biz-preview-dock.compacta .biz-preview-hero { grid-auto-flow: column; grid-template-columns: auto minmax(0, 1fr); justify-items: start; align-items: center; gap: 9px; padding: 0; text-align: left; }
.biz-preview-dock.compacta .biz-preview-hero strong { font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.biz-preview-dock.compacta .biz-preview-logo { max-height: 22px; max-width: 74px; }
.biz-preview-dock.compacta .biz-preview-hero span,
.biz-preview-dock.compacta .biz-preview-cta,
.biz-preview-dock.compacta .biz-preview-cards,
.biz-preview-dock.compacta .biz-preview-note { display: none; }
.biz-preview-dock.compacta .biz-preview::before { width: 90px; height: 90px; right: -30px; top: -46px; }
.biz-preview-toggle { position: absolute; top: 50%; right: 10px; transform: translateY(-50%); z-index: 2; padding: 5px 11px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--text-muted); font: 750 10px/1 "Manrope", sans-serif; cursor: pointer; }
.biz-preview-dock:not(.compacta) .biz-preview-toggle { top: 14px; transform: none; }
@media (hover: hover) { .biz-preview-toggle:hover { border-color: var(--brand); color: var(--brand-ink); } }

/* ===== Imagen de categoría: se ve antes de mandarla ===== */
.catimg-sheet { max-width: 460px; }
.catimg-body { display: grid; gap: 12px; padding: 4px 18px calc(18px + var(--safe-bottom)); overflow-y: auto; }
.catimg-frame { display: grid; place-items: center; max-height: 52vh; overflow: hidden; border: 1px solid var(--line); border-radius: 16px; background: var(--raised); padding: 8px; }
.catimg-frame img { max-width: 100%; max-height: 50vh; width: auto; border-radius: 10px; display: block; }
.catimg-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.catimg-actions .btn-wa { grid-column: 1 / -1; justify-content: center; }
.catimg-actions .btn-ghost { justify-content: center; }
.catimg-text { justify-content: center; font-size: 12px; opacity: .82; }
.catimg-msg { display: grid; gap: 8px; padding: 11px 13px; border: 1px solid var(--line); border-radius: 14px; background: var(--raised); }
.catimg-msg p { margin: 0; max-height: 96px; overflow-y: auto; color: var(--text-body); font: 500 12px/1.5 "Manrope", sans-serif; white-space: pre-wrap; }
.catimg-msg .btn-ghost { justify-content: center; padding: 8px; font-size: 11.5px; }