// storefront-account.jsx — /cuenta · /cuenta/entrar · /estudios

// ════════════════════════════════════════════════════════════════════
// CUENTA (logged-in dashboard)
// ════════════════════════════════════════════════════════════════════
function Cuenta({ mobile }) {
  const s = useStore();
  // Auto-login for demo so the dashboard renders rich content during the pitch
  useEffect(() => { if (!s.loggedIn) s.setLoggedIn(true); }, []);

  const orders = [
    { id:'CMD-26-001847', date:'12 May 2026', items:['Hoodie Oversize · Negro · M','Jogger Cónico · Negro · M','Fleece Jacket · Crema · M'], total: 5897, status:'en-camino', statusLabel:'En camino' },
    { id:'CMD-26-001702', date:'27 Abr 2026', items:['Set Performance · Beige · S'], total: 2199, status:'entregado', statusLabel:'Entregado' },
    { id:'CMD-26-001514', date:'9 Mar 2026', items:['Tee Logo Bordado · Hueso · M','Short Training · Negro · M'], total: 1648, status:'entregado', statusLabel:'Entregado' },
  ];
  const apartados = [
    { id:'AP-26-018', product:'Puffer Jacket', color:'Negro', size:'M', studio:'Polanco', city:'CDMX', hours: 31, mins: 14 },
  ];
  const addresses = [
    { label:'Casa', line1:'Av. Polanco 123, int. 4B', line2:'Polanco V Secc. · CDMX 11550', primary: true },
    { label:'Oficina', line1:'Av. Reforma 250, piso 7', line2:'Juárez · CDMX 06600' },
  ];
  const cards = [
    { brand:'Visa', last4:'4429', exp:'04/29', primary: true },
    { brand:'Mastercard', last4:'1182', exp:'11/27' },
  ];

  const name = 'Valeria';
  const memberSince = 2024;
  const fitfammPts = 1340;

  return (
    <main data-screen-label="Cuenta" style={{ background:'#fff' }}>
      {/* Hero */}
      <section style={{
        padding: mobile ? '28px 16px 32px' : '56px 32px 48px',
        borderBottom:`1px solid ${C.border}`,
      }}>
        <div style={{ fontFamily:'JetBrains Mono, monospace', fontSize: 10, letterSpacing:'0.22em', textTransform:'uppercase', color: C.fgMuted, marginBottom: 12 }}>
          Miembro desde {memberSince}
        </div>
        <div style={{
          fontFamily:'Anton, sans-serif', fontSize: mobile ? 56 : 'clamp(84px, 9vw, 144px)',
          lineHeight: 0.9, letterSpacing:'-0.02em', textTransform:'uppercase',
          paddingTop: 4, marginBottom: 22,
        }}>
          Hola,<br/><span style={{ color: C.accent }}>{name}.</span>
        </div>
        <div style={{
          display:'grid',
          gridTemplateColumns: mobile ? 'repeat(3, 1fr)' : 'repeat(3, max-content)',
          gap: mobile ? 14 : 48,
          marginTop: 8,
        }}>
          <Stat label="Pedidos" value={orders.length} mobile={mobile}/>
          <Stat label="Apartados" value={apartados.length} accent mobile={mobile}/>
          <Stat label="FITFAMM" value={fitfammPts.toLocaleString('es-MX')} suffix="pts" mobile={mobile}/>
        </div>
      </section>

      {/* Mis Pedidos */}
      <AccountSection title="Mis pedidos" kicker="01" mobile={mobile} cta={{ label:'Ver todos los pedidos', onClick: () => {} }}>
        <div style={{ display:'flex', flexDirection:'column' }}>
          {orders.map(o => <OrderRow key={o.id} order={o} mobile={mobile}/>)}
        </div>
      </AccountSection>

      {/* Mis Apartados */}
      <AccountSection title="Mis apartados en estudio" kicker="02" mobile={mobile} dark>
        {apartados.length > 0 ? (
          <div style={{ display:'grid', gridTemplateColumns: mobile ? '1fr' : 'repeat(2, 1fr)', gap: mobile ? 14 : 24 }}>
            {apartados.map(a => <ApartadoCard key={a.id} apartado={a} mobile={mobile}/>)}
          </div>
        ) : (
          <EmptyState mobile={mobile} label="No tienes apartados activos" cta={{ label:'Ir a la tienda', onClick: () => s.go('home') }}/>
        )}
      </AccountSection>

      {/* Direcciones + Métodos de pago */}
      <AccountSection title="Direcciones y pagos" kicker="03" mobile={mobile}>
        <div style={{ display:'grid', gridTemplateColumns: mobile ? '1fr' : '1fr 1fr', gap: mobile ? 24 : 32 }}>
          <div>
            <SubLabel>Direcciones</SubLabel>
            <div style={{ display:'flex', flexDirection:'column', gap: 12 }}>
              {addresses.map(a => <AddressCard key={a.label} address={a} mobile={mobile}/>)}
              <AddNewBtn label="+ Agregar dirección"/>
            </div>
          </div>
          <div>
            <SubLabel>Métodos de pago</SubLabel>
            <div style={{ display:'flex', flexDirection:'column', gap: 12 }}>
              {cards.map(c => <CardRow key={c.last4} card={c} mobile={mobile}/>)}
              <AddNewBtn label="+ Agregar tarjeta"/>
            </div>
          </div>
        </div>
      </AccountSection>

      {/* Datos y preferencias */}
      <AccountSection title="Datos y preferencias" kicker="04" mobile={mobile} last>
        <div style={{ display:'grid', gridTemplateColumns: mobile ? '1fr' : 'repeat(2, 1fr)', gap: 14, marginBottom: 24 }}>
          <ReadField label="Nombre" value="Valeria Martínez"/>
          <ReadField label="Correo" value="valeria@example.com"/>
          <ReadField label="Teléfono" value="55 1234 5678"/>
          <ReadField label="Talla habitual" value="M"/>
          <ReadField label="Estudio favorito" value="Polanco · CDMX"/>
          <ReadField label="Disciplina principal" value="Bootcamp"/>
        </div>
        <div style={{ display:'flex', flexDirection:'column', gap: 10, marginBottom: 28 }}>
          <PrefRow label="Quiero saber de nuevos drops" defaultChecked/>
          <PrefRow label="Sugerencias del Coach Digital basadas en mi entrenamiento" defaultChecked/>
          <PrefRow label="Newsletter mensual de la comunidad"/>
        </div>
        <button onClick={() => { s.setLoggedIn(false); s.go('home'); }} style={{
          background:'transparent', border:0, padding:'4px 0', cursor:'pointer',
          fontFamily:'JetBrains Mono, monospace', fontSize: 11,
          letterSpacing:'0.22em', textTransform:'uppercase', color: C.fgMuted,
          textDecoration:'underline', textUnderlineOffset: 4,
        }}>Cerrar sesión</button>
      </AccountSection>
    </main>
  );
}

// ─── Subcomponents ──────────────────────────────────────────────────
function Stat({ label, value, suffix, accent, mobile }) {
  return (
    <div>
      <div style={{
        fontFamily:'Anton, sans-serif', fontSize: mobile ? 36 : 56,
        lineHeight: 0.9, letterSpacing:'-0.01em', color: accent ? C.accent : C.fg,
      }}>{value}{suffix && <span style={{ fontFamily:'JetBrains Mono, monospace', fontSize: mobile ? 12 : 14, marginLeft: 4, color: C.fgMuted }}>{suffix}</span>}</div>
      <div style={{
        marginTop: 6, fontFamily:'JetBrains Mono, monospace', fontSize: 10,
        letterSpacing:'0.22em', textTransform:'uppercase', color: C.fgMuted,
      }}>{label}</div>
    </div>
  );
}

function AccountSection({ title, kicker, children, cta, dark, last, mobile }) {
  return (
    <section style={{
      background: dark ? C.fg : '#fff',
      color: dark ? '#fff' : C.fg,
      padding: mobile ? '32px 16px 36px' : '56px 32px 64px',
      borderBottom: last ? 'none' : `1px solid ${dark ? 'rgba(255,255,255,0.12)' : C.border}`,
    }}>
      <div style={{
        display:'flex', alignItems:'baseline', justifyContent:'space-between',
        gap: 16, marginBottom: mobile ? 22 : 32, flexWrap:'wrap',
      }}>
        <div style={{ display:'flex', alignItems:'baseline', gap: mobile ? 14 : 24 }}>
          <span style={{
            fontFamily:'JetBrains Mono, monospace', fontSize: 11,
            letterSpacing:'0.22em', color: C.accent,
          }}>{kicker}</span>
          <h2 style={{
            margin: 0, fontFamily:'Anton, sans-serif', fontSize: mobile ? 30 : 48,
            textTransform:'uppercase', letterSpacing:'-0.01em', lineHeight: 0.95, paddingTop: 2,
          }}>{title}</h2>
        </div>
        {cta && (
          <button onClick={cta.onClick} style={{
            background:'transparent', border: 0, padding: '8px 0', cursor:'pointer',
            borderBottom: `1.5px solid ${dark ? '#fff' : C.fg}`,
            fontFamily:'JetBrains Mono, monospace', fontSize: 11,
            letterSpacing:'0.22em', textTransform:'uppercase', fontWeight: 700,
            color: dark ? '#fff' : C.fg, display:'inline-flex', alignItems:'center', gap: 10,
            transition:'gap .2s, color .2s',
          }}>
            {cta.label} <span>→</span>
          </button>
        )}
      </div>
      {children}
    </section>
  );
}

function SubLabel({ children }) {
  return (
    <div style={{
      fontFamily:'JetBrains Mono, monospace', fontSize: 11,
      letterSpacing:'0.22em', textTransform:'uppercase', color: C.fgMuted,
      marginBottom: 14, paddingBottom: 10, borderBottom:`1px solid ${C.border}`,
    }}>{children}</div>
  );
}

function OrderRow({ order, mobile }) {
  return (
    <div style={{
      display:'grid',
      gridTemplateColumns: mobile ? '1fr' : '120px 1fr 160px 140px auto',
      gap: mobile ? 10 : 24,
      padding: mobile ? '18px 0' : '24px 0',
      borderTop:`1px solid ${C.border}`,
      alignItems: mobile ? 'flex-start' : 'center',
    }}>
      <div>
        <div style={{ fontFamily:'JetBrains Mono, monospace', fontSize: 10, letterSpacing:'0.18em', textTransform:'uppercase', color: C.fgMuted }}>Orden</div>
        <div style={{ fontFamily:'JetBrains Mono, monospace', fontSize: 12, fontWeight: 700, marginTop: 4 }}>#{order.id}</div>
      </div>
      <div>
        {!mobile && <div style={{ fontFamily:'JetBrains Mono, monospace', fontSize: 10, letterSpacing:'0.18em', textTransform:'uppercase', color: C.fgMuted, marginBottom: 4 }}>Piezas</div>}
        <ul style={{ listStyle:'none', padding:0, margin:0, display:'flex', flexDirection:'column', gap: 2 }}>
          {order.items.map((i, k) => (
            <li key={k} style={{ fontFamily:'Roboto, sans-serif', fontSize: 13, color: C.fg, lineHeight: 1.45 }}>{i}</li>
          ))}
        </ul>
      </div>
      <div>
        <StatusBadge status={order.status} label={order.statusLabel}/>
        <div style={{ marginTop: 6, fontFamily:'JetBrains Mono, monospace', fontSize: 10, letterSpacing:'0.18em', textTransform:'uppercase', color: C.fgMuted }}>{order.date}</div>
      </div>
      <div>
        <div style={{ fontFamily:'JetBrains Mono, monospace', fontSize: 10, letterSpacing:'0.18em', textTransform:'uppercase', color: C.fgMuted }}>Total</div>
        <div style={{ fontFamily:'Anton, sans-serif', fontSize: 22, lineHeight: 1, marginTop: 4, letterSpacing:'-0.01em' }}>
          ${order.total.toLocaleString('es-MX')}{' '}
          <span style={{ fontFamily:'JetBrains Mono, monospace', fontSize: 9, color: C.fgMuted }}>MXN</span>
        </div>
      </div>
      <div style={{ display:'flex', gap: 8, alignItems:'center', flexWrap:'wrap', marginTop: mobile ? 6 : 0 }}>
        <button style={ghostBtn}>Ver detalles</button>
        <button style={ghostBtn}>Reordenar</button>
      </div>
    </div>
  );
}

const ghostBtn = {
  background:'transparent', border:`1px solid #0A0A0A`, padding:'9px 14px',
  cursor:'pointer', fontFamily:'JetBrains Mono, monospace', fontSize: 10,
  letterSpacing:'0.18em', textTransform:'uppercase', fontWeight: 700,
  color:'#0A0A0A', transition:'background .15s, color .15s',
};

function StatusBadge({ status, label }) {
  const colors = {
    'en-camino': { bg: 'rgba(250,63,63,0.12)', fg: '#FA3F3F', dot:'#FA3F3F' },
    'entregado': { bg: 'rgba(42,157,74,0.12)', fg: '#2a9d4a', dot:'#2a9d4a' },
    'procesado': { bg: 'rgba(0,0,0,0.06)', fg: '#0A0A0A', dot:'#0A0A0A' },
  };
  const c = colors[status] || colors.procesado;
  return (
    <span style={{
      display:'inline-flex', alignItems:'center', gap: 6,
      padding:'5px 10px', background: c.bg, color: c.fg,
      fontFamily:'JetBrains Mono, monospace', fontSize: 10,
      letterSpacing:'0.16em', textTransform:'uppercase', fontWeight: 700,
    }}>
      <span style={{ width: 6, height: 6, borderRadius:'50%', background: c.dot }}/>
      {label}
    </span>
  );
}

function ApartadoCard({ apartado, mobile }) {
  const hours = apartado.hours;
  const mins = apartado.mins;
  return (
    <div style={{
      background:'rgba(255,255,255,0.05)', border:'1px solid rgba(255,255,255,0.16)',
      padding: mobile ? '20px 18px' : '24px 24px',
      display:'grid', gridTemplateColumns: '1fr auto', gap: 16,
    }}>
      <div>
        <div style={{ fontFamily:'JetBrains Mono, monospace', fontSize: 10, letterSpacing:'0.22em', textTransform:'uppercase', color: C.accent, marginBottom: 12 }}>
          Apartado · #{apartado.id}
        </div>
        <div style={{
          fontFamily:'Anton, sans-serif', fontSize: mobile ? 28 : 36,
          textTransform:'uppercase', letterSpacing:'-0.01em', lineHeight: 1, marginBottom: 10,
        }}>
          {apartado.product}
        </div>
        <div style={{ fontFamily:'JetBrains Mono, monospace', fontSize: 10, letterSpacing:'0.18em', textTransform:'uppercase', color:'rgba(255,255,255,0.6)', marginBottom: 6 }}>
          {apartado.color} · Talla {apartado.size}
        </div>
        <div style={{ fontFamily:'Roboto, sans-serif', fontSize: 13, color:'rgba(255,255,255,0.78)' }}>
          Recoge en <strong style={{ color:'#fff' }}>{apartado.studio} · {apartado.city}</strong>
        </div>
      </div>
      <div style={{ textAlign:'right' }}>
        <div style={{ fontFamily:'JetBrains Mono, monospace', fontSize: 9, letterSpacing:'0.22em', textTransform:'uppercase', color:'rgba(255,255,255,0.55)' }}>Te quedan</div>
        <div style={{ fontFamily:'Anton, sans-serif', fontSize: mobile ? 36 : 56, lineHeight: 0.9, color:'#fff', marginTop: 6 }}>
          {hours}h
        </div>
        <div style={{ fontFamily:'JetBrains Mono, monospace', fontSize: 12, color: C.accent, fontWeight: 700, marginTop: 2 }}>
          {mins.toString().padStart(2,'0')} min
        </div>
      </div>
      <div style={{ gridColumn:'1 / -1', display:'flex', gap: 10, flexWrap:'wrap', marginTop: 6 }}>
        <button style={{ ...ghostBtn, background: C.accent, borderColor: C.accent, color:'#fff' }}>Confirmar pickup</button>
        <button style={{ ...ghostBtn, color:'#fff', borderColor:'rgba(255,255,255,0.4)' }}>Cancelar apartado</button>
      </div>
    </div>
  );
}

function EmptyState({ label, cta, mobile }) {
  return (
    <div style={{
      padding: mobile ? '40px 16px' : '64px 32px', textAlign:'center',
      border:'1px dashed rgba(255,255,255,0.18)',
    }}>
      <div style={{ fontFamily:'JetBrains Mono, monospace', fontSize: 11, letterSpacing:'0.22em', textTransform:'uppercase', color:'rgba(255,255,255,0.7)', marginBottom: 18 }}>
        {label}
      </div>
      {cta && (
        <button onClick={cta.onClick} style={{
          background:'#fff', color: C.fg, border: 0,
          padding:'14px 22px', cursor:'pointer',
          fontFamily:'JetBrains Mono, monospace', fontSize: 11, fontWeight: 700,
          letterSpacing:'0.22em', textTransform:'uppercase',
        }}>{cta.label} →</button>
      )}
    </div>
  );
}

function AddressCard({ address, mobile }) {
  return (
    <div style={{
      border:`1px solid ${C.border}`, padding: mobile ? '14px 16px' : '18px 20px',
      display:'flex', justifyContent:'space-between', alignItems:'flex-start', gap: 14,
    }}>
      <div style={{ flex: 1, minWidth: 0 }}>
        <div style={{ display:'flex', alignItems:'baseline', gap: 8, marginBottom: 6 }}>
          <div style={{ fontFamily:'Anton, sans-serif', fontSize: 16, textTransform:'uppercase', letterSpacing:'-0.005em' }}>{address.label}</div>
          {address.primary && <span style={{
            padding:'2px 6px', background: C.accent, color:'#fff',
            fontFamily:'JetBrains Mono, monospace', fontSize: 8, fontWeight: 700,
            letterSpacing:'0.22em', textTransform:'uppercase',
          }}>Default</span>}
        </div>
        <div style={{ fontFamily:'Roboto, sans-serif', fontSize: 13, color:'#333', lineHeight: 1.45 }}>
          {address.line1}<br/>
          <span style={{ color: C.fgMuted }}>{address.line2}</span>
        </div>
      </div>
      <div style={{ display:'flex', flexDirection:'column', gap: 6 }}>
        <button style={miniBtn}>Editar</button>
      </div>
    </div>
  );
}

function CardRow({ card, mobile }) {
  return (
    <div style={{
      border:`1px solid ${C.border}`, padding: mobile ? '14px 16px' : '18px 20px',
      display:'flex', justifyContent:'space-between', alignItems:'center', gap: 14,
    }}>
      <div style={{ display:'flex', alignItems:'center', gap: 14 }}>
        <div style={{
          width: 44, height: 30, background: C.fg, color:'#fff',
          display:'flex', alignItems:'center', justifyContent:'center',
          fontFamily:'Anton, sans-serif', fontSize: 9, letterSpacing:'0.06em',
          textTransform:'uppercase',
        }}>{card.brand.slice(0,4)}</div>
        <div>
          <div style={{ fontFamily:'JetBrains Mono, monospace', fontSize: 13, fontWeight: 700, color: C.fg }}>
            •••• {card.last4}
          </div>
          <div style={{ marginTop: 3, display:'flex', alignItems:'center', gap: 8 }}>
            <span style={{ fontFamily:'JetBrains Mono, monospace', fontSize: 10, letterSpacing:'0.18em', textTransform:'uppercase', color: C.fgMuted }}>Exp {card.exp}</span>
            {card.primary && <span style={{
              padding:'2px 6px', background: C.accent, color:'#fff',
              fontFamily:'JetBrains Mono, monospace', fontSize: 8, fontWeight: 700,
              letterSpacing:'0.22em', textTransform:'uppercase',
            }}>Default</span>}
          </div>
        </div>
      </div>
      <button style={miniBtn}>Editar</button>
    </div>
  );
}

const miniBtn = {
  background:'transparent', border:0, padding:0, cursor:'pointer',
  fontFamily:'JetBrains Mono, monospace', fontSize: 10,
  letterSpacing:'0.18em', textTransform:'uppercase', color: '#0A0A0A',
  textDecoration:'underline', textUnderlineOffset: 4,
};

function AddNewBtn({ label }) {
  return (
    <button style={{
      border:`1px dashed ${C.border}`, padding:'14px 18px', cursor:'pointer',
      background:'transparent', textAlign:'center', color: C.fgMuted,
      fontFamily:'JetBrains Mono, monospace', fontSize: 11,
      letterSpacing:'0.22em', textTransform:'uppercase', fontWeight: 700,
      transition:'color .15s, border-color .15s',
    }} onMouseEnter={e => { e.currentTarget.style.color = C.fg; e.currentTarget.style.borderColor = C.fg; }}
      onMouseLeave={e => { e.currentTarget.style.color = C.fgMuted; e.currentTarget.style.borderColor = C.border; }}>
      {label}
    </button>
  );
}

function ReadField({ label, value }) {
  return (
    <label style={{ display:'flex', flexDirection:'column', gap: 6, padding:'10px 0', borderBottom:`1px solid ${C.border}` }}>
      <span style={{ fontFamily:'JetBrains Mono, monospace', fontSize: 10, letterSpacing:'0.22em', textTransform:'uppercase', color: C.fgMuted }}>{label}</span>
      <div style={{ display:'flex', justifyContent:'space-between', alignItems:'baseline', gap: 12 }}>
        <span style={{ fontFamily:'Roboto, sans-serif', fontSize: 14, color: C.fg }}>{value}</span>
        <button style={miniBtn}>Editar</button>
      </div>
    </label>
  );
}

function PrefRow({ label, defaultChecked }) {
  return (
    <label style={{ display:'flex', alignItems:'center', gap: 12, padding:'6px 0', cursor:'pointer' }}>
      <input type="checkbox" defaultChecked={defaultChecked} style={{ accentColor: C.accent, width: 16, height: 16, flexShrink: 0 }}/>
      <span style={{ fontFamily:'Roboto, sans-serif', fontSize: 13, color:'#222' }}>{label}</span>
    </label>
  );
}

// ════════════════════════════════════════════════════════════════════
// LOGIN / REGISTRO
// ════════════════════════════════════════════════════════════════════
function CuentaEntrar({ mobile }) {
  const s = useStore();
  const [tab, setTab] = useState('signin');
  return (
    <main data-screen-label="Entrar" style={{ background:'#fff' }}>
      <div style={{
        display:'grid',
        gridTemplateColumns: mobile ? '1fr' : '1fr 1fr',
        minHeight: mobile ? 'auto' : 'calc(100vh - 200px)',
      }}>
        {/* ─── Left: Editorial placeholder ─── */}
        <div style={{
          background: C.fg, color:'#fff',
          padding: mobile ? '40px 16px 56px' : '64px 48px',
          position:'relative', overflow:'hidden',
          minHeight: mobile ? 380 : 'auto',
        }}>
          <div style={{ position:'absolute', inset:0, background:`repeating-linear-gradient(45deg, transparent 0 22px, rgba(255,255,255,0.04) 22px 23px)`}}/>
          <div style={{ position:'relative', zIndex: 1, height:'100%', display:'flex', flexDirection:'column', justifyContent:'space-between', gap: 32 }}>
            <div>
              <div style={{ fontFamily:'JetBrains Mono, monospace', fontSize: 11, letterSpacing:'0.22em', textTransform:'uppercase', color: C.accent, marginBottom: 18 }}>
                Comunidad · FITFAMM · Est. 2017
              </div>
              <div style={{
                fontFamily:'Anton, sans-serif', fontSize: mobile ? 'clamp(44px, 12vw, 72px)' : 'clamp(56px, 6vw, 96px)',
                lineHeight: 0.92, letterSpacing:'-0.02em', textTransform:'uppercase',
              }}>
                Únete al<br/><span style={{ color: C.accent }}>escuadrón.</span>
              </div>
              <p style={{
                margin:'24px 0 0', maxWidth: 380,
                fontFamily:'Roboto, sans-serif', fontSize: mobile ? 14 : 16,
                color:'rgba(255,255,255,0.78)', lineHeight: 1.5,
              }}>
                Drops antes que nadie. Apartar en estudio. Try-On con AI.
                Tu Coach Digital. Acceso a la comunidad que entrena contigo.
              </p>
            </div>
            <ul style={{ listStyle:'none', padding:0, margin:0, display:'flex', flexDirection:'column', gap: 10, color:'rgba(255,255,255,0.9)' }}>
              {[
                'Apartado en estudio · 48 horas para decidir',
                'Try-On con AI · ve cómo te queda',
                'Coach Digital · recomendaciones reales',
                'FITFAMM Rewards · Puntos por cada compra',
              ].map((row, i) => (
                <li key={i} style={{
                  display:'flex', alignItems:'center', gap: 12,
                  fontFamily:'JetBrains Mono, monospace', fontSize: 11,
                  letterSpacing:'0.16em', textTransform:'uppercase',
                }}>
                  <span style={{ width: 8, height: 8, background: C.accent, borderRadius:'50%' }}/>
                  {row}
                </li>
              ))}
            </ul>
          </div>
        </div>

        {/* ─── Right: Tabs + form ─── */}
        <div style={{
          padding: mobile ? '32px 16px 48px' : '64px 56px',
          display:'flex', flexDirection:'column', justifyContent:'center',
        }}>
          {/* Tabs */}
          <div style={{ display:'flex', gap: 0, borderBottom:`1px solid ${C.border}`, marginBottom: mobile ? 28 : 40 }}>
            {[
              { k:'signin', label:'Iniciar sesión' },
              { k:'signup', label:'Registrarme' },
            ].map(t => (
              <button key={t.k} onClick={() => setTab(t.k)} style={{
                flex: 1, background:'transparent', border: 0, cursor:'pointer',
                padding:'14px 0', position:'relative',
                fontFamily:'JetBrains Mono, monospace', fontSize: mobile ? 11 : 12,
                letterSpacing:'0.22em', textTransform:'uppercase', fontWeight: 700,
                color: tab === t.k ? C.fg : C.fgMuted,
                transition:'color .15s',
              }}>
                {t.label}
                {tab === t.k && <span style={{
                  position:'absolute', left: 0, right: 0, bottom: -1, height: 2, background: C.accent,
                }}/>}
              </button>
            ))}
          </div>

          {tab === 'signup' ? <SignupForm mobile={mobile}/> : <SigninForm mobile={mobile}/>}

          {/* Guest link */}
          <div style={{ marginTop: mobile ? 28 : 40, textAlign:'center', paddingTop: 24, borderTop:`1px solid ${C.border}` }}>
            <button onClick={() => s.go('home')} style={{
              background:'transparent', border:0, padding:'8px 0', cursor:'pointer',
              fontFamily:'JetBrains Mono, monospace', fontSize: 11,
              letterSpacing:'0.22em', textTransform:'uppercase', color: C.fgMuted,
              textDecoration:'underline', textUnderlineOffset: 4,
              transition:'color .15s',
            }} onMouseEnter={e => e.currentTarget.style.color = C.fg}
              onMouseLeave={e => e.currentTarget.style.color = C.fgMuted}>
              Continuar como invitado →
            </button>
          </div>
        </div>
      </div>
    </main>
  );
}

function SignupForm({ mobile }) {
  const s = useStore();
  const [pw, setPw] = useState('');
  const [showPw, setShowPw] = useState(false);
  return (
    <div>
      <div style={{ fontFamily:'Anton, sans-serif', fontSize: mobile ? 30 : 40, textTransform:'uppercase', letterSpacing:'-0.01em', lineHeight: 0.95, marginBottom: 10, paddingTop: 2 }}>
        Regístrate en <span style={{ color: C.accent }}>COMMANDO</span>
      </div>
      <p style={{ margin:'0 0 26px', fontFamily:'Roboto, sans-serif', fontSize: 14, color:'#444', lineHeight: 1.5 }}>
        Crea tu cuenta para ser parte de la FitFaMM.
      </p>
      <form onSubmit={(e) => { e.preventDefault(); s.setLoggedIn(true); s.go('cuenta'); }} style={{ display:'flex', flexDirection:'column', gap: 14 }}>
        <AuthField label="Nombre completo" type="text" placeholder="Como aparece en tu INE"/>
        <AuthField label="Correo electrónico" type="email" placeholder="tu@correo.com"/>
        <AuthField label="Fecha de nacimiento" type="date"/>
        <AuthField label="Contraseña" type={showPw ? 'text' : 'password'} placeholder="Mínimo 8 caracteres"
          value={pw} onChange={e => setPw(e.target.value)}
          icon={
            <button type="button" onClick={() => setShowPw(p => !p)} style={eyeBtn} title={showPw ? 'Ocultar' : 'Mostrar'}>
              {showPw ? '⊘' : '◉'}
            </button>
          }/>
        <label style={{ display:'flex', alignItems:'flex-start', gap: 10, padding:'4px 0', cursor:'pointer' }}>
          <input type="checkbox" defaultChecked style={{ accentColor: C.accent, width: 16, height: 16, flexShrink: 0, marginTop: 2 }}/>
          <span style={{ fontFamily:'Roboto, sans-serif', fontSize: 12, color:'#444', lineHeight: 1.45 }}>
            Quiero recibir drops, comunidad y descuentos exclusivos.
          </span>
        </label>
        <button type="submit" className="cmd-btn-primary" style={{ marginTop: 6 }}>
          Crear cuenta {Icon.arrowR(16)}
        </button>
      </form>
      <OAuthBlock/>
      <div style={{ marginTop: 18, fontFamily:'JetBrains Mono, monospace', fontSize: 10, letterSpacing:'0.18em', textTransform:'uppercase', color: C.fgMuted, textAlign:'center' }}>
        Al crear cuenta aceptas nuestros términos y privacidad.
      </div>
    </div>
  );
}

function SigninForm({ mobile }) {
  const s = useStore();
  const [pw, setPw] = useState('');
  const [showPw, setShowPw] = useState(false);
  return (
    <div>
      <div style={{ fontFamily:'Anton, sans-serif', fontSize: mobile ? 30 : 40, textTransform:'uppercase', letterSpacing:'-0.01em', lineHeight: 0.95, marginBottom: 10, paddingTop: 2 }}>
        Bienvenido<br/><span style={{ color: C.accent }}>de vuelta.</span>
      </div>
      <p style={{ margin:'0 0 26px', fontFamily:'Roboto, sans-serif', fontSize: 14, color:'#444', lineHeight: 1.5 }}>
        Entra a tu cuenta para ver pedidos, apartados y FITFAMM Rewards.
      </p>
      <form onSubmit={(e) => { e.preventDefault(); s.setLoggedIn(true); s.go('cuenta'); }} style={{ display:'flex', flexDirection:'column', gap: 14 }}>
        <AuthField label="Correo electrónico" type="email" placeholder="tu@correo.com"/>
        <AuthField label="Contraseña" type={showPw ? 'text' : 'password'} placeholder="••••••••"
          value={pw} onChange={e => setPw(e.target.value)}
          icon={
            <button type="button" onClick={() => setShowPw(p => !p)} style={eyeBtn} title={showPw ? 'Ocultar' : 'Mostrar'}>
              {showPw ? '⊘' : '◉'}
            </button>
          }/>
        <div style={{ display:'flex', justifyContent:'flex-end', marginTop: -6 }}>
          <a href="#" style={{
            fontFamily:'JetBrains Mono, monospace', fontSize: 10,
            letterSpacing:'0.22em', textTransform:'uppercase', color: C.accent,
            textDecoration:'underline', textUnderlineOffset: 4,
          }}>¿Olvidaste tu contraseña?</a>
        </div>
        <button type="submit" className="cmd-btn-primary" style={{ marginTop: 6 }}>
          Entrar {Icon.arrowR(16)}
        </button>
      </form>
      <OAuthBlock/>
    </div>
  );
}

function AuthField({ label, type, placeholder, value, onChange, icon }) {
  return (
    <label style={{ display:'flex', flexDirection:'column', gap: 8 }}>
      <span style={{
        fontFamily:'JetBrains Mono, monospace', fontSize: 11,
        letterSpacing:'0.22em', textTransform:'uppercase', color: C.fgMuted,
      }}>{label}</span>
      <div style={{ position:'relative' }}>
        <input type={type} placeholder={placeholder} value={value} onChange={onChange} style={{
          width:'100%', padding:'14px 16px', paddingRight: icon ? 44 : 16,
          border:`1.5px solid ${C.border}`, background:'#fff', color: C.fg,
          fontFamily:'JetBrains Mono, monospace', fontSize: 13, letterSpacing:'0.06em',
          outline:'none', borderRadius: 0, boxSizing:'border-box',
        }}/>
        {icon && <div style={{ position:'absolute', right: 8, top:'50%', transform:'translateY(-50%)' }}>{icon}</div>}
      </div>
    </label>
  );
}

const eyeBtn = {
  background:'transparent', border: 0, cursor:'pointer',
  padding:'4px 8px', fontFamily:'JetBrains Mono, monospace', fontSize: 16,
  color: '#0A0A0A',
};

function OAuthBlock() {
  return (
    <React.Fragment>
      <div style={{ display:'flex', alignItems:'center', gap: 12, margin:'24px 0' }}>
        <div style={{ flex: 1, height: 1, background: C.border }}/>
        <span style={{ fontFamily:'JetBrains Mono, monospace', fontSize: 10, letterSpacing:'0.32em', color: C.fgMuted }}>O</span>
        <div style={{ flex: 1, height: 1, background: C.border }}/>
      </div>
      <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr', gap: 10 }}>
        <button type="button" style={oauthBtn}>
          <GoogleIcon/> Continuar con Google
        </button>
        <button type="button" style={oauthBtn}>
          <AppleIcon/> Continuar con Apple
        </button>
      </div>
    </React.Fragment>
  );
}

const oauthBtn = {
  display:'inline-flex', alignItems:'center', justifyContent:'center', gap: 10,
  background:'#fff', border:`1.5px solid ${C.border}`, padding:'12px 16px', cursor:'pointer',
  fontFamily:'JetBrains Mono, monospace', fontSize: 11, fontWeight: 700,
  letterSpacing:'0.16em', textTransform:'uppercase', color: '#0A0A0A',
  transition:'background .15s, border-color .15s',
};

function GoogleIcon() {
  return (
    <svg viewBox="0 0 24 24" width="16" height="16" aria-hidden="true">
      <path fill="#4285F4" d="M22.6 12.2c0-.8-.1-1.5-.2-2.2H12v4.2h5.9c-.3 1.4-1 2.5-2.2 3.3v2.8h3.6c2.1-1.9 3.3-4.8 3.3-8.1z"/>
      <path fill="#34A853" d="M12 23c3 0 5.5-1 7.3-2.7l-3.6-2.8c-1 .7-2.3 1.1-3.7 1.1-2.9 0-5.3-2-6.2-4.6H2.1v2.9C3.9 20.6 7.6 23 12 23z"/>
      <path fill="#FBBC05" d="M5.8 14c-.2-.7-.4-1.4-.4-2.1s.1-1.4.4-2.1V6.9H2.1A11 11 0 0 0 1 11.9c0 1.8.4 3.5 1.1 5l3.7-2.9z"/>
      <path fill="#EA4335" d="M12 5.4c1.6 0 3.1.6 4.2 1.7l3.2-3.2C17.5 2 14.9 1 12 1 7.6 1 3.9 3.4 2.1 6.9l3.7 2.9C6.7 7.4 9.1 5.4 12 5.4z"/>
    </svg>
  );
}

function AppleIcon() {
  return (
    <svg viewBox="0 0 24 24" width="16" height="16" fill="#0A0A0A" aria-hidden="true">
      <path d="M16.7 12.7c0-2.5 2-3.7 2.1-3.8-1.1-1.7-2.9-1.9-3.5-1.9-1.5-.2-2.9.9-3.7.9-.8 0-1.9-.9-3.2-.8-1.6 0-3.1.9-4 2.4-1.7 3-.4 7.4 1.2 9.8.8 1.2 1.8 2.5 3.1 2.4 1.3-.1 1.7-.8 3.2-.8s1.9.8 3.2.8c1.3 0 2.2-1.2 3-2.4.7-1.1 1.1-2.2 1.4-3.3-1.7-.6-2.9-2.3-2.8-3.3zM14.3 5.6c.7-.8 1.1-1.9 1-3-.9.1-2 .6-2.7 1.4-.6.7-1.2 1.8-1 2.9 1 .1 2-.5 2.7-1.3z"/>
    </svg>
  );
}

// ════════════════════════════════════════════════════════════════════
// ESTUDIOS
// ════════════════════════════════════════════════════════════════════
function Estudios({ mobile }) {
  const s = useStore();
  const [country, setCountry] = useState('MX');
  const byCity = {};
  STUDIOS.forEach(st => {
    const c = byCity[st.city] = byCity[st.city] || { name: st.city, count: 0, studios: [] };
    c.count += 1;
    c.studios.push(st);
  });
  const cityOrder = ['CDMX','EDOMX','GDL','Cancún'];
  const cities = cityOrder.map(n => byCity[n]).filter(Boolean);

  // Spain studios (manual, real names)
  const SPAIN = [
    { id:'mad-velazquez', name:'Velázquez',  city:'Madrid' },
    { id:'mad-colon',     name:'Colón',      city:'Madrid' },
  ];

  return (
    <main data-screen-label="Estudios" style={{ background:'#fff' }}>
      {/* Hero */}
      <section style={{
        padding: mobile ? '28px 16px 28px' : '56px 32px 40px',
        borderBottom:`1px solid ${C.border}`,
      }}>
        <div style={{ fontFamily:'JetBrains Mono, monospace', fontSize: 11, letterSpacing:'0.22em', textTransform:'uppercase', color: C.accent, marginBottom: 14 }}>
          CDMX 19 · EDOMX 1 · GDL 3 · Cancún 1 · Madrid 2
        </div>
        <div style={{
          fontFamily:'Anton, sans-serif', fontSize: mobile ? 60 : 'clamp(88px, 10vw, 168px)',
          lineHeight: 0.9, letterSpacing:'-0.02em', textTransform:'uppercase',
          paddingTop: 4, marginBottom: 22,
        }}>
          Nuestros<br/><span style={{ color: C.accent }}>estudios.</span>
        </div>
        <p style={{
          margin: 0, maxWidth: 520,
          fontFamily:'Roboto, sans-serif', fontSize: mobile ? 14 : 16, color:'#333', lineHeight: 1.5,
        }}>
          Apártala, recógela, pruébala en persona. Las prendas viven donde vive la comunidad.
        </p>

        {/* Country tabs */}
        <div style={{ display:'flex', gap: 0, borderBottom:`1px solid ${C.border}`, marginTop: mobile ? 28 : 40 }}>
          {[
            { k:'MX', label:'México', count: STUDIOS.length },
            { k:'ES', label:'España', count: SPAIN.length },
          ].map(t => (
            <button key={t.k} onClick={() => setCountry(t.k)} style={{
              background:'transparent', border:0, padding:'14px 22px', cursor:'pointer',
              fontFamily:'JetBrains Mono, monospace', fontSize: 12, fontWeight: 700,
              letterSpacing:'0.22em', textTransform:'uppercase',
              color: country === t.k ? C.fg : C.fgMuted,
              position:'relative', display:'inline-flex', alignItems:'center', gap: 10,
            }}>
              {t.label}
              <span style={{ color: country === t.k ? C.accent : C.fgMuted, fontSize: 10 }}>({t.count})</span>
              {country === t.k && <span style={{ position:'absolute', left: 0, right: 0, bottom: -1, height: 2, background: C.accent }}/>}
            </button>
          ))}
        </div>
      </section>

      {country === 'MX' ? <StudiosMX cities={cities} mobile={mobile}/> : <StudiosES studios={SPAIN} mobile={mobile}/>}

      {/* "Dónde estamos" — compact grid */}
      <section style={{
        background: C.bgWarm, padding: mobile ? '40px 16px' : '72px 32px',
        borderTop:`1px solid ${C.border}`,
      }}>
        <div style={{
          fontFamily:'Anton, sans-serif', fontSize: mobile ? 36 : 64,
          textTransform:'uppercase', letterSpacing:'-0.015em', lineHeight: 0.95, marginBottom: mobile ? 22 : 32, paddingTop: 2,
        }}>
          Dónde estamos.
        </div>
        <div style={{
          display:'grid',
          gridTemplateColumns: mobile ? '1fr 1fr' : `repeat(${cities.length}, 1fr)`,
          gap: mobile ? 16 : 20,
        }}>
          {cities.map(c => (
            <div key={c.name} style={{ borderTop:`1px solid ${C.fg}`, paddingTop: 10 }}>
              <div style={{ display:'flex', alignItems:'baseline', justifyContent:'space-between', marginBottom: 6 }}>
                <span style={{ fontFamily:'Anton, sans-serif', fontSize: mobile ? 22 : 32, textTransform:'uppercase' }}>{c.name}</span>
                <span style={{ fontFamily:'JetBrains Mono, monospace', fontSize: 11, color: C.accent, fontWeight: 700 }}>({c.count})</span>
              </div>
              <div style={{ fontFamily:'Roboto, sans-serif', fontSize: 12, color: C.fgMuted, lineHeight: 1.5 }}>
                {c.studios.slice(0, 3).map(s => s.name).join(' · ')}
                {c.count > 3 && <> · +{c.count - 3} más</>}
              </div>
            </div>
          ))}
          <div style={{ borderTop:`1px solid ${C.fg}`, paddingTop: 10 }}>
            <div style={{ display:'flex', alignItems:'baseline', justifyContent:'space-between', marginBottom: 6 }}>
              <span style={{ fontFamily:'Anton, sans-serif', fontSize: mobile ? 22 : 32, textTransform:'uppercase' }}>Madrid</span>
              <span style={{ fontFamily:'JetBrains Mono, monospace', fontSize: 11, color: C.accent, fontWeight: 700 }}>(2)</span>
            </div>
            <div style={{ fontFamily:'Roboto, sans-serif', fontSize: 12, color: C.fgMuted, lineHeight: 1.5 }}>
              Velázquez · Colón
            </div>
          </div>
        </div>
      </section>
    </main>
  );
}

function StudiosMX({ cities, mobile }) {
  const s = useStore();
  const [showAll, setShowAll] = useState(false);
  // Show first 12 by default
  const flat = cities.flatMap(c => c.studios.map(st => ({ ...st, cityCount: c.count })));
  const visible = showAll ? flat : flat.slice(0, 12);
  return (
    <section style={{ padding: mobile ? '24px 16px 40px' : '48px 32px 80px' }}>
      <div style={{
        display:'grid',
        gridTemplateColumns: mobile ? '1fr' : 'repeat(3, 1fr)',
        gap: mobile ? 16 : 24,
      }}>
        {visible.map(st => (
          <StudioCard key={st.id} studio={st} mobile={mobile}/>
        ))}
      </div>
      {!showAll && flat.length > 12 && (
        <div style={{ display:'flex', justifyContent:'center', marginTop: 32 }}>
          <button onClick={() => setShowAll(true)} style={{
            background:'transparent', border:`1.5px solid ${C.fg}`, padding:'16px 28px', cursor:'pointer',
            fontFamily:'JetBrains Mono, monospace', fontSize: 11, fontWeight: 700,
            letterSpacing:'0.22em', textTransform:'uppercase',
            transition:'background .15s, color .15s',
          }} onMouseEnter={e => { e.currentTarget.style.background = C.fg; e.currentTarget.style.color = '#fff'; }}
            onMouseLeave={e => { e.currentTarget.style.background = 'transparent'; e.currentTarget.style.color = C.fg; }}>
            Ver más estudios ({flat.length - 12} restantes) →
          </button>
        </div>
      )}
    </section>
  );
}

function StudiosES({ studios, mobile }) {
  const s = useStore();
  const [email, setEmail] = useState('');
  const [sent, setSent] = useState(false);
  return (
    <section style={{ padding: mobile ? '24px 16px 40px' : '48px 32px 80px' }}>
      <div style={{
        display:'grid',
        gridTemplateColumns: mobile ? '1fr' : 'repeat(3, 1fr)',
        gap: mobile ? 16 : 24,
      }}>
        {studios.map(st => (
          <StudioCard key={st.id} studio={st} mobile={mobile}/>
        ))}
        {/* Notify card */}
        <div style={{
          background: C.fg, color:'#fff',
          padding: mobile ? '20px 18px 24px' : '24px 22px',
          display:'flex', flexDirection:'column', justifyContent:'space-between', gap: 18,
          minHeight: mobile ? 'auto' : 380,
        }}>
          <div>
            <div style={{ fontFamily:'JetBrains Mono, monospace', fontSize: 10, letterSpacing:'0.22em', textTransform:'uppercase', color: C.accent, marginBottom: 14 }}>
              Próximamente
            </div>
            <div style={{ fontFamily:'Anton, sans-serif', fontSize: mobile ? 30 : 36, textTransform:'uppercase', letterSpacing:'-0.01em', lineHeight: 0.95, marginBottom: 12 }}>
              Llegamos a<br/><span style={{ color: C.accent }}>más ciudades<br/>pronto.</span>
            </div>
            <p style={{ margin: 0, fontFamily:'Roboto, sans-serif', fontSize: 13, lineHeight: 1.5, color:'rgba(255,255,255,0.72)' }}>
              Déjanos tu correo y serás el primero en saber.
            </p>
          </div>
          {sent ? (
            <div style={{
              border:`1px solid ${C.accent}`, padding:'12px 14px',
              fontFamily:'JetBrains Mono, monospace', fontSize: 11, letterSpacing:'0.14em', textTransform:'uppercase',
            }}>
              ✓ Listo. Te avisamos.
            </div>
          ) : (
            <form onSubmit={(e) => { e.preventDefault(); setSent(true); }} style={{ display:'flex', flexDirection:'column', gap: 8 }}>
              <input value={email} onChange={e => setEmail(e.target.value)} type="email" placeholder="tu@correo.com" required style={{
                padding:'12px 14px', background:'transparent', color:'#fff',
                border:'1.5px solid rgba(255,255,255,0.3)', outline:'none',
                fontFamily:'JetBrains Mono, monospace', fontSize: 12, letterSpacing:'0.06em',
              }}/>
              <button type="submit" style={{
                background: C.accent, color:'#fff', border: 0, padding:'12px 14px', cursor:'pointer',
                fontFamily:'JetBrains Mono, monospace', fontSize: 11, fontWeight: 700,
                letterSpacing:'0.22em', textTransform:'uppercase',
              }}>Notifícame →</button>
            </form>
          )}
        </div>
      </div>
    </section>
  );
}

function StudioCard({ studio, mobile }) {
  const s = useStore();
  const idx = String((Math.abs(studio.id.split('').reduce((a, c) => a + c.charCodeAt(0), 0)) % 24) + 1).padStart(2, '0');
  return (
    <article style={{ display:'flex', flexDirection:'column', height:'100%' }} data-cursor-label="Ver">
      <div style={{ position:'relative', aspectRatio:'4/5', background:'#15120F', overflow:'hidden' }}>
        <div style={{ position:'absolute', inset:0, background:`repeating-linear-gradient(45deg, transparent 0 14px, rgba(255,255,255,0.04) 14px 15px)`}}/>
        <div style={{
          position:'absolute', top: 12, left: 12,
          fontFamily:'JetBrains Mono, monospace', fontSize: 9,
          letterSpacing:'0.22em', textTransform:'uppercase', color:'rgba(255,255,255,0.55)',
        }}>STUDIO · {studio.name.toUpperCase()} · {idx}/24</div>
        <div style={{
          position:'absolute', bottom: 12, left: 12,
          fontFamily:'JetBrains Mono, monospace', fontSize: 9,
          letterSpacing:'0.22em', textTransform:'uppercase', color:'rgba(255,255,255,0.4)',
        }}>[ Frame · 4:5 ]</div>
      </div>
      <div style={{ paddingTop: 14, display:'flex', flexDirection:'column', flex: 1 }}>
        <div style={{ fontFamily:'JetBrains Mono, monospace', fontSize: 10, letterSpacing:'0.22em', textTransform:'uppercase', color: C.fgMuted, marginBottom: 4 }}>
          {studio.city}
        </div>
        <div style={{ fontFamily:'Anton, sans-serif', fontSize: mobile ? 26 : 30, textTransform:'uppercase', letterSpacing:'-0.005em', lineHeight: 1, marginBottom: 10 }}>
          {studio.name}
        </div>
        <div style={{ fontFamily:'Roboto, sans-serif', fontSize: 13, color:'#333', lineHeight: 1.45, marginBottom: 10 }}>
          Lun–Vie · 6:00 — 21:00<br/>
          Sáb · 8:00 — 14:00
        </div>
        <div style={{ display:'flex', gap: 6, flexWrap:'wrap', marginBottom: 16 }}>
          {['Bootcamp','Bici','Taller','Mat','Hyrox'].map(d => (
            <span key={d} style={{
              padding:'4px 8px', background: C.bgWarm, border:`1px solid ${C.border}`,
              fontFamily:'JetBrains Mono, monospace', fontSize: 9, fontWeight: 700,
              letterSpacing:'0.18em', textTransform:'uppercase', color: C.fg,
            }}>{d}</span>
          ))}
        </div>
        <div style={{ marginTop: 'auto', display:'flex', flexDirection:'column', gap: 8 }}>
          <button onClick={() => window.open('https://commandostudio.com/mx/', '_blank')} className="cmd-btn-primary" style={{ padding:'12px 14px', fontSize: 11 }}>
            Reservar clase {Icon.arrowR(13)}
          </button>
          <button onClick={() => s.openReserva(PRODUCTS[0])} style={{
            background:'transparent', color: C.fg, border:`1px solid ${C.border}`, cursor:'pointer',
            padding:'12px 14px', fontFamily:'JetBrains Mono, monospace', fontSize: 10, fontWeight: 700,
            letterSpacing:'0.2em', textTransform:'uppercase',
          }}>Apartar prenda aquí</button>
        </div>
      </div>
    </article>
  );
}

Object.assign(window, { Cuenta, CuentaEntrar, Estudios });